|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
; A* r H+ a5 w6 k5 P- V" A2 f$ R1 O- N, m! b, P& m3 p
JS 操作 Select相关功能测试, r& y" ^* N2 q5 Q
0 C: ?& e/ W$ F! I) u! _) y2 b[mw_shl_code=html,true]<html lang="en">
& u9 U1 U- j. p2 ^9 O6 `# s3 G. t- e/ e0 ?4 a9 ^
<head>( N$ ~- T: C9 D7 J; O& n7 |
<meta charset="UTF-8">
7 U8 H) }1 C7 [1 _$ n <meta name="viewport" content="width=device-width, initial-scale=1.0">
( t. l$ ?/ } Q9 k( n <meta http-equiv="X-UA-Compatible" content="ie=edge">
* [1 ^* ?, b* E <title>Document</title>
- ?' H( s3 i+ m* ~# Y <style>% J1 s1 |% _: d9 }% ~8 S# I
* {8 w3 f* _) @5 J6 A, ] y4 h/ b
font-size: 10px;
0 `7 |. _* |: J. W- N3 J line-height: 24px;/ k5 {* S3 l( R5 Y& w V
}6 d1 u( \4 q( f9 L+ R8 ]
</style>
( J$ x) N. A( d& ?</head>2 K' V( y6 `, ]' l
# u5 M3 [# G% O/ f6 y! e
<body>
( f# L# r) a6 M/ s //this is for the select test
/ b) h$ p1 S$ U/ R5 J+ E) V <form id='myForm' action="submit" method="GET">: Q. X% _2 H, T! }1 {" m5 q; C) e
<input type="text" id="inpuTChange" />/ W4 t' K; M( f. F6 D. ~% ?
<select name="selectFruits" id="mySelect">
" N; B# f5 |0 J" V <option value="Orange1">Orange</option>
- {" R7 }+ W! n1 D; i. K5 J0 ] <option value="Apple2">Apple</option>+ ~- r5 y, q$ f! Z: [3 e
<option value="Banana3">Banana</option>5 _% ^8 W# J, i
</select>$ y+ N1 w) ?$ J9 ]- e6 z" R
<br>3 k( q2 i g8 Q$ ~* D# J, d
<input type="button" value="disable">
# _( ^) h- e* x# u <input type="button" value="Able">
* Z. V- U! u" v' g$ i <input type="button" value="getValues">4 d y( l D; @, V, F6 p
<input type="button" value="editValues">4 E$ [# z5 ~& _7 x
<input type="button" value="addValues">
" H7 b# N+ i. Z0 w5 J) C <input type="button" value="removeValues">
& S, V* o7 {$ {. n6 g7 { <br>& \" C: S* z* |6 f1 k' w& \4 {
c$ t1 n& ~6 i i3 T& c
</form>. p5 X( n" Q1 d. P( E
, N; [, Y, p% j
<p id="demoInput"></p>9 x! b: g7 B' `% \- }
9 }+ c7 B5 m {
0 `( Q. z: N# s5 C" p. ] <script>
3 I- p+ y! k- F" M function disableFunc() {! K" N7 ~$ {/ H t' P7 |8 w# k7 h! y
document.getElementById('mySelect').disabled = true$ o2 {& c7 c1 Y
}
" N6 K! e% C& ?2 E; e" u% W function ableFunc() {/ e: j# u C# l) N& N
document.getElementById('mySelect').disabled = false! k3 Z% ?, W) z! n
}
A' N5 _' H8 Z7 x3 A6 L function getValues() {
! ^/ o" ?1 ?- S5 [6 g4 s/ R2 j var text = '<ul>'( J1 u" A2 c( F2 [
var x = document.getElementById('mySelect')0 B8 f6 f( S6 g. o6 ^0 Y. v
for (var i = 0; i < x.length; i++) {
`6 y. Q( {; _8 Y: H7 r text += '<li>' + x.text + '</li>'2 N7 N3 [* |; J, @7 v( s
}: W2 |4 d2 E2 H0 ?4 G! c
text += '</ul>'
% h0 o/ [& B, E& `% {+ u document.getElementById('demoInput').innerHTML = text
' N/ o( K0 _- i; J- n8 \ }
$ h% ^# K {, { H
/ L6 e( Q( m/ k3 K: u function editValue() {
3 P' R8 x5 S- Z% i) i var mySelected = document.getElementById('mySelect')
, I6 X: i" }3 ^. w var selectedIndex = mySelected.selectedIndex
- P5 {9 Q o7 f Y5 L7 a mySelected[selectedIndex].text = document.getElementById('inputChange').value
9 ^) v ^, X" ~) e+ D }4 x: Y9 v6 E$ P6 R. O$ q! ]
8 C5 d" h* z* O( R' l
function removeValue() {! y/ o" Q" c9 M, J b
var myselect = document.getElementById('mySelect')
7 x" {/ Y0 i; d9 O7 P: N. s2 i0 k" O var selectedIndex = myselect.selectedIndex. i' P" r* S0 Y+ Z. a
myselect.remove(selectedIndex)
* n& f1 `. K. D0 B: [% z }
7 R2 X4 C! r* V- F' W H( d; G function addValue() {
a; u& f* H& W* V" F5 U var myselect = document.getElementById('mySelect')
7 n8 z/ f. J+ ~& { var addvalue = document.getElementById('inputChange').value- }( m4 z) X, W0 o
myselect.options.add(new Option(addvalue,"value")). |( w: k' c+ T5 \- W
}
3 D/ L& | d' Y" G! T- { </script>3 P; f, O. n( S
</body>
3 M3 @' Z" x( l9 z& h# H% @; A5 E! u
8 D% y3 ~4 D: z</html>[/mw_shl_code]
' t# R. E2 C* X, E8 w |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
