|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
. ?1 |$ L# K. G1 ]
. ` n3 u6 T( Q: c2 c. @; }: L1 Y! V
JS 操作 Select相关功能测试3 G% z8 X: [* h/ d9 z
0 F6 d Y6 R) Y: s( p( Z) _% \8 g
[mw_shl_code=html,true]<html lang="en">9 V: [! M# J6 y2 _ f& a/ A
0 Y& [' h6 I, p2 h6 z
<head>
X- h- U3 w5 j <meta charset="UTF-8">
' ]( m7 B/ f8 W& ?& h <meta name="viewport" content="width=device-width, initial-scale=1.0">$ s e1 G7 m3 ?5 y. O! y. E$ c. i
<meta http-equiv="X-UA-Compatible" content="ie=edge">
/ e( U* L+ Q4 n1 \9 r0 E: _- L <title>Document</title>
( d& g$ [1 B5 N4 l7 i) y <style>
; S! T8 _9 A2 b * { g6 L" ^( n* J' _) k9 x
font-size: 10px;; s3 @+ u# W- y4 Z, W
line-height: 24px;+ S- K8 w+ j" J8 V8 ?3 G/ \5 ]
}
$ g9 h4 j; y+ B) s </style>
9 E6 R& D# l1 a' M) s</head>9 w, x# C; o: `/ g$ e J
# h- @8 N) u) e/ r9 Q
<body>
# E6 n& \/ _) T9 f6 t //this is for the select test
) ~2 {3 c+ O: R$ Y" F: h8 _! b1 m* u <form id='myForm' action="submit" method="GET">& q2 R- s- o" Y8 A1 h6 l2 L6 |, X" k! A
<input type="text" id="inpuTChange" />' ~' b3 {' }. I! B
<select name="selectFruits" id="mySelect">: ?/ {8 s) w# c& J3 g: [ M# }
<option value="Orange1">Orange</option>* j4 J! l" N( Z! C& K# l3 Z1 o. R
<option value="Apple2">Apple</option>
% ^/ F+ u0 Y) Y* O4 r: _7 B* X$ | <option value="Banana3">Banana</option>
0 b* P* K. z j </select>6 D( n$ {: p$ X( }) w" Y& n* u: D
<br>
: A7 ~: i+ \1 s% l! d0 S <input type="button" value="disable">
/ Z, f3 ^3 X. u8 b; \+ C. K) S, @ <input type="button" value="Able">+ M1 w ?; D# Y( b2 K! g, X
<input type="button" value="getValues">* ^) T" M( K1 z( K
<input type="button" value="editValues">! w% w O2 D5 \8 @ j
<input type="button" value="addValues">
* |( y# D5 a) L <input type="button" value="removeValues">
9 g4 |# o7 X2 Q6 K <br>+ ^$ J) d3 }1 }4 B) n% q) Z5 [' K
3 f6 d: @) M5 m% M2 E </form>9 o" w8 I& i) P: w+ z) o
' { ?& J* `. E4 N) E
<p id="demoInput"></p>
9 d, ^8 g1 E1 O% i2 a* e6 d7 [) f: ~ c5 x
4 n1 t$ h3 o' J( _5 O* p! s
<script>, ~/ P4 D N) U! G% U6 t
function disableFunc() {
c0 E7 \3 ?1 Y5 @: ?; T document.getElementById('mySelect').disabled = true
' Y8 Z8 i/ ]- T, ], y( P }/ P8 n. D, }' c* l' o
function ableFunc() {+ _. _$ b/ q3 W0 q
document.getElementById('mySelect').disabled = false$ K# C9 D0 i3 C2 a: Y% P
}1 k1 B9 Z- r6 X8 z/ a' x
function getValues() {+ c2 x% l5 }: y2 v1 i# A: a
var text = '<ul>'
9 z& d9 o# v: ~+ ? var x = document.getElementById('mySelect')
$ k9 [* `' d: p# q) a3 @7 r for (var i = 0; i < x.length; i++) {# x, ~' Z. {8 p4 I2 @8 h
text += '<li>' + x.text + '</li>'% j8 a5 M* c2 K3 ?- |: S+ c
}
% D4 O& G- X2 m2 p/ i$ Z text += '</ul>'& s& W# I8 R7 a% }7 S- y
document.getElementById('demoInput').innerHTML = text' u ]+ s7 `1 B. |1 ]9 w
}
, j( k P2 `3 c% \' M, N4 U( m" l; i6 h/ X
function editValue() {; C, j3 s$ r+ Z+ Z6 A+ p4 }
var mySelected = document.getElementById('mySelect')
( X$ \2 t9 X) \' D var selectedIndex = mySelected.selectedIndex
. e% A2 @% S% ^6 `/ f9 a mySelected[selectedIndex].text = document.getElementById('inputChange').value
- Y9 o# J, I9 x6 E }
5 K4 l. j& ?3 d, H1 u7 }! a- s- z% {) u5 ~
function removeValue() {
$ y0 M( x1 O' ^ F4 _- \ var myselect = document.getElementById('mySelect')
+ i* H, ]- ~ d5 p& \1 { var selectedIndex = myselect.selectedIndex/ I1 j7 I: V1 o$ x
myselect.remove(selectedIndex)2 G9 h" }+ B) g: G- t3 x
}
1 ?: y2 Q/ [0 @7 K/ A) W/ q4 R8 t function addValue() {
' |6 ]. ]1 [0 z, b var myselect = document.getElementById('mySelect')
+ V* |! k& k" W2 v& m( H) v var addvalue = document.getElementById('inputChange').value7 r7 A! h/ t) o$ s1 |: S
myselect.options.add(new Option(addvalue,"value"))
; x3 _$ O( }+ |$ p; q! y, h }" C( \" j, ?' v* T
</script>
* R# s. P2 A z) v9 \+ m</body>
H; K7 ?9 g* o. {- Y5 z7 E
6 ^7 K$ l/ l/ F+ s" t& p$ J</html>[/mw_shl_code]& I' I$ X, p7 [1 v* D( t# t* |
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
