|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
# {- |6 ~; i2 `6 e. T* h& x! _! a
: w0 {6 ^9 o1 t9 P- M/ r
JS 操作 Select相关功能测试
$ m/ y, a# s( P; v
0 A$ O, l0 ^9 p' c[mw_shl_code=html,true]<html lang="en">9 s: m, ^5 ]# @! z
9 U3 m' t4 y$ t/ M( c<head>3 N- H- Z" [& k. |3 t/ ~" q, @
<meta charset="UTF-8">
- `, n" P' g) \! z3 D" Q <meta name="viewport" content="width=device-width, initial-scale=1.0">
! H; o$ T2 |$ C6 u <meta http-equiv="X-UA-Compatible" content="ie=edge">
: x/ ~+ O+ j6 w' d5 D <title>Document</title>: q8 }% B: d' f6 L* h0 a% T5 J
<style>
x+ h1 |2 o8 @ * {8 Q! b, W; z6 x8 D- U
font-size: 10px;
: Y- `* ]8 H/ T8 K8 F2 w line-height: 24px;
7 [4 ]: D$ G: n& Z6 k1 ` }/ E6 {0 b( B$ D0 I0 _" f0 v
</style>1 S+ L$ _- ^/ m1 s! W7 x
</head>- H# C3 x8 a ]7 _+ j4 b
5 ^9 I. }# U0 W6 v j<body>
7 a3 H$ N* f" U! ^! l //this is for the select test
+ s/ M8 l1 g0 P$ W* M <form id='myForm' action="submit" method="GET">
! [ F% b$ a; j4 ^" P5 M( R9 t <input type="text" id="inpuTChange" />
0 `- z0 x& J/ r" Y; p <select name="selectFruits" id="mySelect">; P" k; {2 L5 B9 V- ?. `7 Y: ?
<option value="Orange1">Orange</option>+ A }& h1 y5 c6 e
<option value="Apple2">Apple</option>7 X" e2 Q: ~" ~
<option value="Banana3">Banana</option>
% s/ R1 j" \1 y3 q( ]1 ? </select>( N5 M0 r' _. e; L8 U
<br>
; p6 ^4 g5 `! k+ Z: }( P <input type="button" value="disable">
# C9 d9 `1 Q( n( l. ` <input type="button" value="Able">
1 h/ }7 N3 k" h8 B' V( j# [ <input type="button" value="getValues">% y5 d: m$ b1 X7 R, O! ~
<input type="button" value="editValues">8 a: M% V. t/ i) X! R1 K( b
<input type="button" value="addValues">
7 v8 \4 C* B" \) ^ <input type="button" value="removeValues">, c4 S* n+ s" A) F2 S' p
<br>
/ U9 l" j' b, O- R: T- M! B+ t1 G% r- V0 d/ g: K* v& W$ [$ }( S
</form> Z( k9 b4 i/ }: g
# o6 f4 }; j! P8 H% e <p id="demoInput"></p># u0 ?: e; T( V
% j7 }( `+ H. I
) e7 Q9 E. E# j. ? <script>
& t/ X1 E9 E6 b# Q function disableFunc() {; a( I7 ~ f* h0 g' V( z9 A
document.getElementById('mySelect').disabled = true
: ^7 ?4 y. {) M }
) E0 s$ P2 c/ L# j, W8 I6 ] function ableFunc() {
( E6 I. I/ ^8 c7 ` k document.getElementById('mySelect').disabled = false M' ~2 q3 e% g
}
6 K8 j' {6 R0 U% H& z& A function getValues() {# E: ? j. a) W( }8 \
var text = '<ul>'6 c, Z3 n7 }" Y8 m( f
var x = document.getElementById('mySelect')
- `& F) V8 \7 B2 X+ x3 s' T for (var i = 0; i < x.length; i++) { V. X2 R! S1 C8 Z. n8 r
text += '<li>' + x.text + '</li>'
% a9 Z0 o. t* c# t2 j }
) T9 B9 w: t$ V% K4 o0 R( r text += '</ul>'5 d5 `6 }. Q2 g4 ^6 A
document.getElementById('demoInput').innerHTML = text
3 W/ h1 c$ O# ?$ m& s' n8 ^. [ }$ K5 y7 I0 ], r1 ^/ O
( w/ k7 [; b5 x% u# F6 l
function editValue() {7 ?8 X8 G0 n, N
var mySelected = document.getElementById('mySelect')
, Y' E/ I9 @% ^$ Q var selectedIndex = mySelected.selectedIndex
4 I+ X. ` Z* O' v2 [; o- i9 _ mySelected[selectedIndex].text = document.getElementById('inputChange').value
1 a3 x+ K. x" A+ ^, e }/ n+ z5 K5 S6 ?4 m* ?2 |
h7 `# `2 \) q
function removeValue() {% {) B' {5 F) z0 a
var myselect = document.getElementById('mySelect')4 I5 t3 d8 s+ a; U3 ]1 D. }
var selectedIndex = myselect.selectedIndex
9 L+ T0 Y( a" W4 p3 }5 I myselect.remove(selectedIndex)
: t1 N5 d w$ k& _4 I }
! O6 y. [: {# ? function addValue() {% ~' z- Y8 f- s2 Y# L
var myselect = document.getElementById('mySelect')
+ }% M% p2 z- T" ` var addvalue = document.getElementById('inputChange').value
2 ]3 t! X( R: v: g8 V& ?6 T9 P/ v3 C, W myselect.options.add(new Option(addvalue,"value"))
$ }. z' b+ ~3 m' j1 ^2 H }" C+ o7 F2 d5 Y, z) a
</script>
8 i% v+ W9 O/ [8 z</body>' U/ Z. J2 @5 w$ h9 X
3 d: o0 y4 {+ ]( L2 M7 n, U0 X
</html>[/mw_shl_code]
1 l! }) J0 N( [/ Z o |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
