|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
! i5 A7 T7 {/ v
$ o4 B1 \( w* }9 ^4 [JS 操作 Select相关功能测试
! g2 Z' m9 O, v1 a
1 `( h+ R8 I8 |; H[mw_shl_code=html,true]<html lang="en">
6 _) B9 Z& K; I' I! R
8 y+ W; ?- [0 R8 f% o- ?/ m8 I<head>5 i7 h, e! V% f
<meta charset="UTF-8">) o. H1 i0 z* w; T4 e k; `
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/ s# A5 M. \/ M$ i5 f <meta http-equiv="X-UA-Compatible" content="ie=edge">
" m/ l }' {7 o; J$ Z <title>Document</title>8 |$ X7 W. Q! }
<style>
1 T* O5 H4 v0 Q/ P6 J/ c0 ^ * {
/ o7 L0 S7 K/ r font-size: 10px;
/ f! D7 h- n* J line-height: 24px;9 _5 O% E' e3 q
}: J2 Y( |: n6 U9 b; l8 D5 d; R/ @
</style>
1 w1 `5 [, F8 F* T* g</head>
& K6 T" ]# f) C- b8 {/ @6 p7 s9 I8 C, a' P1 T% i
<body>
4 e/ _& o* v; n _9 R( X. b" C: }) Q3 ] //this is for the select test1 |9 s! x/ J0 L; m9 D; S, L8 S0 h
<form id='myForm' action="submit" method="GET">& D- F' p% @5 T. N* N4 F# A* E
<input type="text" id="inpuTChange" />( X/ x" B- d' J0 f6 i" t# w) m" G
<select name="selectFruits" id="mySelect">
" R3 _. x) F' G# U! Q <option value="Orange1">Orange</option>4 e3 y& S/ s- B
<option value="Apple2">Apple</option>
8 X9 K: b9 A( Y1 }/ z3 I* l <option value="Banana3">Banana</option>0 r" L* O* y/ |0 u' l& E
</select>
' d4 d6 h. B: V, C <br>- o: h/ p, J% w# f& U, B2 O- n( `$ S/ b" ]
<input type="button" value="disable">) K) \, q7 w; H" X3 P
<input type="button" value="Able">
?9 p" T# f* x; J <input type="button" value="getValues">9 c9 n. E! H/ Y x) e6 j
<input type="button" value="editValues">
6 r7 Z6 X* L$ M1 n+ t! X/ ` <input type="button" value="addValues">" s) j" Z) L" w1 t! E) m1 x
<input type="button" value="removeValues">
7 b1 x8 ^. d/ P* u3 u8 w7 V <br>( r, \; j9 r2 F$ z6 O
" X$ N; M2 D# w6 j% |
</form>0 t- Q; e1 J B8 f' {
# |+ T! U1 n! U: s1 w
<p id="demoInput"></p>
1 N5 S+ E {2 `9 C! l7 v- A8 s' N2 Z4 z9 H0 I& S2 M9 W2 \
2 H# q- i& q$ [' R9 y$ z- c; M0 \
<script>
/ \2 k' N9 M$ D* Q" p function disableFunc() {$ U) N8 l% k( c6 a5 n( S8 `
document.getElementById('mySelect').disabled = true
6 L8 e) w: Y9 P0 M: V7 ~4 \; I3 d }
5 b& Y1 |+ w; j2 u1 s0 Y5 H" C- e function ableFunc() {
3 N3 D4 ^- N8 i. z document.getElementById('mySelect').disabled = false% U& `( f; i: a: q
}
- G2 S+ p q( _) H6 D! i0 D function getValues() {# M7 `" K$ _, {5 P3 T# H
var text = '<ul>'8 z6 ]7 _9 B/ i4 r9 u" A0 g
var x = document.getElementById('mySelect'): m( x* R* |3 W- w! G
for (var i = 0; i < x.length; i++) {
4 D2 ?4 n4 t C" G, I text += '<li>' + x.text + '</li>'" R& M: H8 A t3 e9 s3 y2 k$ U1 w
}
3 A8 U v; |3 a1 [ text += '</ul>'% x3 u: L3 g. v! D6 j- v
document.getElementById('demoInput').innerHTML = text6 P& {5 Z' E2 g# E) \" ^0 d
}
* P/ \1 @: _4 f H; Z/ P2 U. I; B3 L
function editValue() {
) J, U6 T; [: I& l- j var mySelected = document.getElementById('mySelect')4 b9 ?6 }" U7 ~' {
var selectedIndex = mySelected.selectedIndex
! H( \6 }$ I b! L/ g/ R; _ mySelected[selectedIndex].text = document.getElementById('inputChange').value- u& C* N0 M. ^& a
}# v. L, q! V, ]3 o/ o
1 d) _1 \0 g8 E
function removeValue() {
! x! d2 D% | W var myselect = document.getElementById('mySelect')5 T2 C- D1 I6 S8 n" |2 }5 c* u
var selectedIndex = myselect.selectedIndex
1 z: G& R x7 k( y4 M6 d& u- z+ `8 R myselect.remove(selectedIndex)3 M/ _3 x5 M! R7 }
}! M2 h/ I' A" p. ?4 M" c2 z
function addValue() {9 B% J+ Z1 N- S/ o
var myselect = document.getElementById('mySelect')
& N; R! [! v; v7 T. O& T var addvalue = document.getElementById('inputChange').value0 t9 y$ N/ b% q* ?4 p: g6 V8 W( k
myselect.options.add(new Option(addvalue,"value"))# g1 I* o' K) j6 M; p; }. m
}4 H# _( Q! _* l6 \+ |
</script>
2 l1 v, z* F4 K- m+ t</body>3 h* {% ]& ]/ o) q: x
( ]% f) f8 u1 L8 U+ b, b+ E' I</html>[/mw_shl_code]
( v. u( M0 L: l/ S8 e, A$ a: H |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
