|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
# P$ q5 x4 U. i1 ?. ~
5 j; G* ~$ e E
JS 操作 Select相关功能测试. U8 l: s2 ^& e. `+ l) f* Q
g$ U5 \6 R' y- A0 v9 I; b- ?[mw_shl_code=html,true]<html lang="en">" ]- J0 {) D- ]& y* c/ x2 X
; g! ~3 G8 }. M8 F9 t+ z B
<head>: d0 g; x! Y0 i! D! Q7 f1 D
<meta charset="UTF-8">
0 W) u2 ]$ S4 t7 i$ Q <meta name="viewport" content="width=device-width, initial-scale=1.0">: o x" Z# _9 U2 h" ]0 {
<meta http-equiv="X-UA-Compatible" content="ie=edge">4 q9 t$ I+ D* q( p* v w
<title>Document</title>0 |# l# S& s+ `! T8 x3 q+ m
<style>
$ h; I% D. o3 V; ^, } * {) @& _* D1 y a# C# ~+ Q
font-size: 10px;
8 C; e# P: x5 n- w6 x line-height: 24px;. f- _" x: ?$ V7 i- R
}
0 V0 E* A S& L% w </style>
3 B% j3 m0 r9 o) s* W</head>
9 o0 W& f |' K+ p* d' Q& F
2 z' o2 F% h6 u<body>: S( p) R' l. N- H# T
//this is for the select test
1 ~0 k e# m) W( O- X <form id='myForm' action="submit" method="GET">
: a$ z; |0 O, u: r6 n# q <input type="text" id="inpuTChange" />2 ~ U1 [! {8 J/ v
<select name="selectFruits" id="mySelect">0 F. y: c7 F+ Q5 p
<option value="Orange1">Orange</option>9 ^) \9 `( c3 I/ T
<option value="Apple2">Apple</option>
. {% d; U( F( y: U% i* N4 W <option value="Banana3">Banana</option>1 u4 d6 m/ n' k/ x, u2 D/ k6 l* x$ m
</select>/ C4 Q c1 C" [5 y0 k; q! x
<br>
2 U$ A1 g, k a* _ q8 a# y0 f <input type="button" value="disable">9 L% W) r" H' W9 i
<input type="button" value="Able">
6 p# }& U# [' i/ ?) e* o <input type="button" value="getValues">
U* ?. b% `. F; N7 I: R2 n x# s* ^ <input type="button" value="editValues">
& c! w) W# g" _5 H; ?# G3 L <input type="button" value="addValues">0 Y- _9 v0 ^# a5 ?2 s
<input type="button" value="removeValues">- ?" v! S6 G) Z: U& r* f; |
<br>
9 I3 z1 Z* f/ o* V, I8 R6 B2 u+ r
- K7 c+ G1 D) k. \# V- Y, G </form>
% g0 N, r2 `3 \& r: ^: O
- ~8 J9 y& @, J H <p id="demoInput"></p>
; W) d+ ^: x- S7 y- @
/ k1 `3 `( K$ k/ K% a. A, r2 ?( Z( G3 c8 w
<script>
1 p% i( n9 \; t) r O8 @- ^" ^! { function disableFunc() {9 ?) J4 H+ N+ K2 z4 E9 u$ i
document.getElementById('mySelect').disabled = true' j) y; h/ f8 Z* k& L9 Q( Q% u- e
}8 |' P2 ]3 r. e2 _8 \
function ableFunc() {: X1 e- E& G) P. }' ^* W, M
document.getElementById('mySelect').disabled = false
, C; i8 ^. B2 W }
6 p% e9 f0 t, V* I2 M" p7 ^ function getValues() {
: U" L6 p! h% [ var text = '<ul>'
0 m z7 l1 O7 Z- p9 B7 F var x = document.getElementById('mySelect')
) U. P3 g% N% L) S; l" ^ for (var i = 0; i < x.length; i++) {+ t+ s5 H+ n2 R; M9 k1 @/ Y3 f' j0 s
text += '<li>' + x.text + '</li>'$ P j. K/ l' w- s; a7 r% L* e
}
( L( ]) Z( C. p( m: t. t text += '</ul>'0 n7 K# n2 @6 Z, O2 s1 b
document.getElementById('demoInput').innerHTML = text+ }. D6 ]8 e a8 g H) N/ e
}" w2 p) W6 M% v) m( ]8 b
. `/ z$ L; ~6 w# C function editValue() {# F" [2 ?- g: Q! l' f! _; T
var mySelected = document.getElementById('mySelect')
4 ?+ t: t+ `; J) ?# M. D4 M var selectedIndex = mySelected.selectedIndex- r/ @9 ^( } [& {
mySelected[selectedIndex].text = document.getElementById('inputChange').value: M/ ?0 c- e; N
}1 i6 ?) u; G6 K4 J. {6 O
: {; F2 _! b! F% }. a$ `2 _) D; \
function removeValue() {
# p% n, \% O- A& h1 G$ r- o var myselect = document.getElementById('mySelect'), e7 t1 R6 s! p
var selectedIndex = myselect.selectedIndex* |: o! t2 A3 |$ D# F5 n" c
myselect.remove(selectedIndex)
# Z4 {4 V2 w _: G# _! R }
6 \; K2 W7 A9 `) A! K function addValue() {
v/ y" D2 _- |: h" `( b" W var myselect = document.getElementById('mySelect')
, J5 j3 O6 Y# g var addvalue = document.getElementById('inputChange').value
2 a: o* S3 o+ p O) L. v$ [ myselect.options.add(new Option(addvalue,"value"))2 R4 S+ l, f9 Y/ n5 F
}
- W6 r6 `5 m* J9 r3 l1 [9 ~ u8 M </script>6 f, b8 n/ T! G6 f, [6 k. F
</body>
$ m7 \. C) c/ a3 x4 {# q9 U
* F9 K( H. K3 d4 V& I2 |- O</html>[/mw_shl_code]
2 {* m, ^1 d. V M1 B4 _ |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
