|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
0 x' o6 u0 b2 e" I# K
7 W. }- n _1 Q3 VJS 操作 Select相关功能测试( t2 k3 Y1 g2 ]4 e* ?; n
9 A' j( M) r' z0 j4 z% [[mw_shl_code=html,true]<html lang="en">
" e0 S4 X/ q D l f2 p0 u% f0 |+ k3 w' e( ~" O0 P
<head>" L0 P7 _) @! ^8 z4 c
<meta charset="UTF-8">( V4 a6 `' H- K& U3 _3 a
<meta name="viewport" content="width=device-width, initial-scale=1.0">+ D8 A! Z# P- Y; s
<meta http-equiv="X-UA-Compatible" content="ie=edge">% A2 H8 G' \' \' _- Y) L
<title>Document</title>+ G5 p; O; ^* U
<style># t3 U5 B" u+ C8 P" w
* {! b+ q( v" r; L/ R& `: v
font-size: 10px;1 i: t0 |( L( h" B5 ]
line-height: 24px;
: ]3 b! G$ ^# c$ P8 T/ n }
8 @& ?+ E; I- s* b8 C t </style>
5 z! k4 i% W" V5 n+ f8 T</head>) T6 f: d5 e7 \# C; x% c* A2 _& H
5 p4 \* I+ J+ v0 r0 P
<body>
# N* k% E1 J% | Y+ x //this is for the select test# y" n* A t4 J! b$ Q" K
<form id='myForm' action="submit" method="GET">
* h! H! ~" u) r0 \6 G& v& E <input type="text" id="inpuTChange" />
- i' [ y" P1 O! Z5 U4 R X <select name="selectFruits" id="mySelect">
. ?/ `8 r( E2 i <option value="Orange1">Orange</option>
/ S) Z2 K) a$ S* x; R <option value="Apple2">Apple</option>' M( @0 X; u& w* Q" g
<option value="Banana3">Banana</option>
; h& q- o7 ~7 N. T" f$ U/ h </select>5 Q; N% x2 B/ b) v+ u
<br>/ E; h9 A9 C6 o P& [
<input type="button" value="disable">, J$ L" B9 C4 W& p4 c
<input type="button" value="Able">
" Y; o+ N# G, S& s <input type="button" value="getValues">
7 U7 u5 |) ?! J" s2 f. w <input type="button" value="editValues"> t' }, W( H2 j; z1 W& B
<input type="button" value="addValues">
/ t- w0 I3 |( Z, p6 G5 L <input type="button" value="removeValues">
@0 G$ s' d: O; P! f% T& V <br>% y6 {7 x3 F- K; o5 G! h% d1 a5 q
# I* n8 ?& N8 r4 }
</form>/ p% e5 x4 a; m5 Q0 K
; g. r* |7 `5 G3 k <p id="demoInput"></p>0 z, i3 }1 f7 y; }
( O( R: \5 Z" R( @9 T* P% Z; |+ B4 U
( S" q7 Z& |/ H7 x$ b; S <script>0 b4 k( L* B2 b. E) h' v+ R
function disableFunc() {8 c8 B! {2 l7 A: L% n
document.getElementById('mySelect').disabled = true9 t( D5 k) q) u2 B3 e
}7 `9 C! w" U. V) u( J2 G
function ableFunc() {- u6 y0 r) I! N/ ^4 @( i
document.getElementById('mySelect').disabled = false. ?# c* ^% o2 m6 s, ?: C' Q
}
' X6 |3 N- `! F& e function getValues() {
/ ~% ^& H. }, g7 K var text = '<ul>'3 k% U Z9 C: G
var x = document.getElementById('mySelect'): G) s+ j6 g1 }9 c0 P$ v# A
for (var i = 0; i < x.length; i++) {, x2 j+ f4 A Q5 L
text += '<li>' + x.text + '</li>'
0 V; H. u7 K* k; [5 M }8 c1 N0 R9 {1 x9 n* w/ u2 ]
text += '</ul>': Z+ e. s, Q2 n! E
document.getElementById('demoInput').innerHTML = text S4 F. w; B2 r% Y7 D
}$ ~8 k7 e, j) G3 j7 s0 U: `% q
( C. N9 G" S4 r& Y
function editValue() {
" k, I& x# Q( S! x var mySelected = document.getElementById('mySelect')
0 S" S1 V& R$ f+ G5 | var selectedIndex = mySelected.selectedIndex
1 e6 U" u# l' o% T mySelected[selectedIndex].text = document.getElementById('inputChange').value
: D" C; E/ A' P" ~0 \; P }0 |( c) [# y; t& u5 b- e
7 z8 N# t8 O7 r. u* p
function removeValue() {
$ G. M$ s! _1 s* N2 m1 }; H% v var myselect = document.getElementById('mySelect')
B' i: E9 c( P* f' F7 E0 c var selectedIndex = myselect.selectedIndex1 x& ~, r9 A4 I M/ h+ h
myselect.remove(selectedIndex)
5 V8 ^! p! r3 q6 T: ^ }
s0 [% f) O4 h7 d function addValue() {: |4 X$ ~; z; ?
var myselect = document.getElementById('mySelect')
8 f& X* [& `1 E# K6 L var addvalue = document.getElementById('inputChange').value' t& }% q- ]3 P9 X
myselect.options.add(new Option(addvalue,"value"))
- B# U" B2 t. c) B }
# b o- _# ~4 s6 }: E) H Y/ \ </script>3 n. @4 }; y0 s
</body>
% g( T/ h4 a: e# N3 w( P0 G1 f
</html>[/mw_shl_code]0 `0 l* j6 `: S( I
|
|