|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
5 }3 J* [( Z3 b* E7 E, |3 F
, t- Y- M, y; z# H% N0 T5 q
JS 操作 Select相关功能测试* I- ~ Z- R, H- t6 _" ~! F
/ b% T% _! x5 v- s- C
[mw_shl_code=html,true]<html lang="en">5 \+ a# L* ~: `9 h1 S8 Q0 h
2 ^- y* P5 ~8 E<head>
' v* ~' K; g( ^5 u! `! v <meta charset="UTF-8">
5 d0 o8 V5 ?+ A <meta name="viewport" content="width=device-width, initial-scale=1.0">
p& C/ k, l% J7 O9 ]3 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
2 n# i. {) }+ u8 T4 l% s <title>Document</title>
5 l( p$ K+ E; O q, E' J <style>
! z7 s' d- g* `$ H5 B. \4 H2 Y9 y8 Q * {- e8 z4 k$ N( } y7 y1 ^
font-size: 10px;
5 Q* r7 j* O J3 H! P/ R* D line-height: 24px;+ j }7 x" |$ T/ b# C) R# _- G# X
}: H" o* d8 T, c6 i$ |
</style> S/ @5 o# T1 |6 l' w
</head>8 J, j- r) G4 }# Z7 }* m W
* l) b3 G( v; Z2 n
<body>+ G; I. D( u. a0 ^# F
//this is for the select test9 @3 \1 S) W7 }. m Y, O* ?& l4 G
<form id='myForm' action="submit" method="GET">
4 x% s6 l* a( c0 |7 M/ ] <input type="text" id="inpuTChange" />9 Q- t( d* H3 e! h
<select name="selectFruits" id="mySelect">
" D' L6 c2 c: A: v- n& k9 U <option value="Orange1">Orange</option>
], w. |# D* H2 r3 i; @) Q, W <option value="Apple2">Apple</option>
6 Z4 p7 u2 m" M <option value="Banana3">Banana</option>
( F8 t# W. [+ {4 B/ e; z8 H </select>- h: q* G! F2 d. D- x n! X6 G* K
<br>
: L& m) M( S1 \7 }8 {9 S% R <input type="button" value="disable">: E, p. H6 r# `: w+ B, \
<input type="button" value="Able">
% f; S9 b% ^% l- Q- j" S <input type="button" value="getValues">: q4 o8 O* ~; M7 ], u! v
<input type="button" value="editValues">0 B- C& X# b2 z# `3 {4 p
<input type="button" value="addValues">
# G( N3 d& a& f/ j <input type="button" value="removeValues">
2 L9 @( v6 [3 ]3 J5 e! o7 l <br>
" L8 d: ^" x7 C% R$ m k; M, L( e# v# y& ~# s: u: @5 s1 T
</form>* v4 x: T, E" S0 X& ~# ?
: I$ Q& X+ J6 t/ K <p id="demoInput"></p>: k) B: @1 e/ Q6 n/ v
. e( J2 y; t7 d) s7 d& G X! P
0 S# {' j% ^: _; s) T7 a9 H4 R <script>
$ l. `0 c1 v0 A# P. L function disableFunc() {* J+ G2 t: X6 }0 \ Q' T; b9 T- }
document.getElementById('mySelect').disabled = true6 f4 E& q5 x5 H9 i7 f5 Y
}# X( l2 u; a8 v* w
function ableFunc() {- o6 R* Q9 y2 G! n
document.getElementById('mySelect').disabled = false) D w3 D0 h7 ]
}
8 q/ A- w0 Y, P. X function getValues() {
8 r* Q1 V- E2 L/ i$ z+ D, X var text = '<ul>'& @# I+ K5 |' B5 r9 J) m
var x = document.getElementById('mySelect')1 M# x! w' A. ~: l* Q
for (var i = 0; i < x.length; i++) {
6 B! Y: x) B9 T4 n text += '<li>' + x.text + '</li>'- q: J4 h4 D" N, d( H: F
}
) o4 m2 k9 z4 q# x% Z text += '</ul>'
3 L+ y. q- Z1 K5 ]( R document.getElementById('demoInput').innerHTML = text
8 u3 Q; N0 }) M$ O9 x }9 O1 l) B6 _- V2 E7 v2 E2 K
& G0 `; f6 j& s" g9 @: w* {4 i
function editValue() {
1 \# e K5 S8 ] {" ~ var mySelected = document.getElementById('mySelect')2 Q' N5 {$ G* @+ s$ f% T3 T
var selectedIndex = mySelected.selectedIndex- j! ~* q. C7 x- i6 v# D% Q6 S$ ^# A" j
mySelected[selectedIndex].text = document.getElementById('inputChange').value! x: U8 b& {* ~$ |- r
}
+ p$ o1 S) k% U" w* u
+ J2 e! D w1 \7 y6 I function removeValue() {
( Q- j9 {! R/ T& e* x D$ v var myselect = document.getElementById('mySelect')
* S: u7 t$ {; R( v) Y' T var selectedIndex = myselect.selectedIndex7 Z3 ~! z5 E! F D Q/ O7 q
myselect.remove(selectedIndex)4 Q5 }/ `8 B$ n9 W
}
+ t! n: H9 W) N+ Q7 Y0 T function addValue() {
2 H# d/ T, o5 l5 Q" Q/ H var myselect = document.getElementById('mySelect')
1 W! Z8 l& H- o: _9 X8 v) V var addvalue = document.getElementById('inputChange').value
6 P, ?6 n9 E$ z) } myselect.options.add(new Option(addvalue,"value"))
# Y$ ]7 i+ `( {4 |" H$ s }
* S( G9 R! n, c' C+ l" t </script>
! n; M. y0 l5 J+ P; T2 o8 Y</body>
$ F0 H+ F( W* s2 n" O( x( `0 V c. @
</html>[/mw_shl_code]! {! y0 B7 d' U6 x4 p' j5 \* R
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
