|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
3 q" w$ ^5 L& b- Q7 _+ ?2 m
" U8 Z x. } u7 U- O
JS 操作 Select相关功能测试
3 X* X; W$ D# m r) F8 g; B
6 v$ g5 a* P K% \6 |/ N[mw_shl_code=html,true]<html lang="en">
! r: ^( C% b5 |. k, ?
6 o/ G2 V+ \( ]<head>
& g7 B1 g+ i8 r$ H% }9 d: q) X <meta charset="UTF-8">$ h' O) t8 n- q& [# _
<meta name="viewport" content="width=device-width, initial-scale=1.0">/ h8 {0 f7 x. Y# Q
<meta http-equiv="X-UA-Compatible" content="ie=edge">
2 F- `1 }5 p1 l! L9 z+ }; b <title>Document</title>+ B _9 K4 p3 v0 j: z5 W2 u' O5 Q
<style>
4 O$ [2 H. l7 j * {* }5 W7 W6 a0 ^9 R9 q( x1 f
font-size: 10px;
" k8 Y! T8 p* W( R line-height: 24px;
* [& T: q5 U' z5 { }
( b6 E" l6 N! N5 p- I2 { </style>
- |$ [& n& D: G5 p8 F</head>
# y: n2 @( K9 \
$ h+ m* @9 C, y; |* ?<body>5 |. p5 h) Z8 F/ @* J
//this is for the select test. P% k" `8 x; Z5 W
<form id='myForm' action="submit" method="GET"># L/ H2 J7 W; Q8 S
<input type="text" id="inpuTChange" />
- h" b5 q @& s3 E* O1 k S+ _ <select name="selectFruits" id="mySelect">
( U$ K2 E$ B1 q2 m1 B6 U8 s <option value="Orange1">Orange</option>1 H, M4 z8 p1 l3 p0 v7 X
<option value="Apple2">Apple</option>
2 c- g) \" _4 P* r <option value="Banana3">Banana</option>
1 _( \: _8 h5 @% H% J, h! Z6 V7 x </select>
4 j9 `) r6 o. q5 V4 O# L! S! W0 t, a <br>* ?, K2 J9 O* f2 a! D( _/ `
<input type="button" value="disable">
4 {1 ~% x/ [5 Z7 R: r v" l <input type="button" value="Able">
4 [) E4 v4 K% c$ o8 O <input type="button" value="getValues">, w; S, a9 i+ v" r6 _8 c
<input type="button" value="editValues">) _4 P2 u1 P8 a( e
<input type="button" value="addValues">
+ H3 e7 B4 _3 w, T <input type="button" value="removeValues">
, [5 b7 h5 t9 N) X$ y. B <br>
* [: \: \4 t. ?* u4 }
8 T* v0 u8 j4 @8 c8 [: N </form>
- Q! I8 S) V5 g: \( y5 P1 ^$ R3 Q. w
0 i5 l( E$ {+ v! p0 ?3 z <p id="demoInput"></p>0 f6 J7 ~+ C. {/ n
9 a: o/ k. {$ L' X
7 t/ R% g% L2 i) V
<script>
' l2 i: M% D' f: C/ N% M/ E8 C function disableFunc() {* k* R! E5 G" g+ ^7 W; A
document.getElementById('mySelect').disabled = true
8 X o) A$ b6 c( J }
( w6 L2 f1 H5 S" E function ableFunc() {
3 G1 y* E1 y% i7 t, j' O+ z document.getElementById('mySelect').disabled = false
7 N c0 Q$ {3 m0 ?* E( j. H }
8 d' |& h4 S" w3 @- ?' \+ Y u+ H function getValues() {
' m6 I, U5 ~! J3 I6 v: Q var text = '<ul>'- a7 W' r/ v f, e
var x = document.getElementById('mySelect')- F) m3 x9 m3 p+ U/ ^7 f
for (var i = 0; i < x.length; i++) {3 S4 [4 }* S0 R# |- }; K+ e9 _
text += '<li>' + x.text + '</li>'
/ a. ~' Z- W( N2 N: C: r( q$ n }
, n2 \6 d; [" i) T text += '</ul>'4 B" k/ G9 _% o; v* w
document.getElementById('demoInput').innerHTML = text- i% Z$ Y+ Z* a6 c) S
}
- \8 [7 m2 V6 G. w e
8 g& M# W5 _! }1 h, x function editValue() {
1 V+ Z. c" S; L% ~4 @ var mySelected = document.getElementById('mySelect')
7 x: a8 Q5 Z4 f& X& r/ @ var selectedIndex = mySelected.selectedIndex4 J; @ B4 o9 F o. W
mySelected[selectedIndex].text = document.getElementById('inputChange').value
: d' C- S0 K o }
0 n# Y$ a- h( ^ x2 s3 D
% |# D1 M/ D) o function removeValue() {- O/ x1 X! X! x, `" i, P I
var myselect = document.getElementById('mySelect')
* d$ \7 U0 H' b0 G var selectedIndex = myselect.selectedIndex7 u2 Y1 Y5 d5 l$ J* {
myselect.remove(selectedIndex)% X9 \1 |% Q3 F% |4 R) e5 J" ?: _
}8 J9 l" h6 `% j' M: }1 S
function addValue() {! U! ]; j% r1 o; F2 L/ V
var myselect = document.getElementById('mySelect')
4 H- f5 U ?/ b8 s+ \& A8 ] var addvalue = document.getElementById('inputChange').value4 I+ h3 I; ?( k6 ~: P* r5 r
myselect.options.add(new Option(addvalue,"value"))3 L8 A) R' f8 C$ f. q0 v
}: Y: P8 ]' C4 o3 Z! g
</script>
5 `' i! ^: Y4 }, o' e1 k</body>
! e& W; }3 }. a1 i/ _: @. v( Z: }' `0 f T' D6 N% v i, ^
</html>[/mw_shl_code]
8 b* h& O2 R7 B6 P% T% A3 v |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
