|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) z4 n6 D& {& O6 q" r8 |; P
( j4 H% L% ]. Z' N( hJS 操作 Select相关功能测试 b; G: d' y" h) E! f
1 q' E! _- W8 y[mw_shl_code=html,true]<html lang="en">) d% O5 j5 V4 A6 \$ d, p3 H- ^ c6 J
7 d7 X% b/ k' o<head>
+ q; S+ [- Y* H$ T3 v6 [ <meta charset="UTF-8">
; [) }) R/ l6 c* N ^4 L: y <meta name="viewport" content="width=device-width, initial-scale=1.0">
( x) h2 ?4 t1 q3 W <meta http-equiv="X-UA-Compatible" content="ie=edge">" J2 _ p$ | a3 c
<title>Document</title># H0 L3 A3 C- [2 }9 P" ?
<style>
* `3 ^: ?/ L& r, Q0 A6 o * {
8 R; `5 M4 W: @$ b1 x4 a. Z font-size: 10px;
# G! Z$ @8 x. X line-height: 24px;
5 X) e$ a6 X8 _/ r) P0 s }9 @1 M. f; x+ ]' L: j" `9 j( H
</style>- o6 j/ Q4 A5 l0 O4 _
</head>
' B9 ]* M( B2 m; q2 ?; l& p! s4 d
<body>& p% T) u. F* x6 |4 P% Q; C
//this is for the select test
' n; ?# q3 q8 M" ^5 ]; n <form id='myForm' action="submit" method="GET">+ s* X7 C4 z. d8 J7 m! z
<input type="text" id="inpuTChange" />1 a. K1 h' J( e) h, @" F" m
<select name="selectFruits" id="mySelect">
5 B% m: P3 [# o" n( x& C <option value="Orange1">Orange</option>
! }5 y' w4 g. Y6 o <option value="Apple2">Apple</option># O1 N$ |0 Y2 t. F. o
<option value="Banana3">Banana</option>, k$ X1 F( @# ]% Q, z% O
</select>, G4 [5 M2 V; N$ D& A \
<br>$ t: p# }& y# O' |7 O1 {+ \
<input type="button" value="disable">
* v4 ~7 N( F" g+ B) A+ a <input type="button" value="Able">
. k5 g+ U* a0 g2 S- n/ P. k8 g <input type="button" value="getValues">9 R9 P% Z6 Z% [5 B& w; ~) f
<input type="button" value="editValues">" J$ A4 M9 k' `0 ~3 M( B
<input type="button" value="addValues">
6 @6 S: h. T( S% ?% o7 e <input type="button" value="removeValues">8 x6 u! ~- Q p3 K
<br> K9 j. n. D {; F, X" y
2 I$ ^ `+ O- s- ]) S: U' m. J9 I </form> c' Z, \0 K& t) ? _* O, I
" B! Y, K( a' f% l- r5 G- | <p id="demoInput"></p>
5 i& y9 q, G' d% F% P8 U. c( J2 \ e( {! ], \
+ ~% g# Z5 O X4 U, J, R <script>
( n" ?( U. S* U* {( e. Q function disableFunc() {' Z5 D! X. @1 |. C1 p$ L
document.getElementById('mySelect').disabled = true0 n: s4 F& Z5 Y, Q
}
6 ]' t3 F1 N) }7 F, m function ableFunc() {
) b! a" E( ]8 x, t, N, f' P document.getElementById('mySelect').disabled = false! C; C; E& M' S9 Y* i; b
} T" r( H! O% O X) H( U
function getValues() {
: m) Q0 g/ h: X* Z/ t+ z var text = '<ul>'# h( ]! W# a5 G( ~4 O
var x = document.getElementById('mySelect')- T& S! i" _, V+ N; u
for (var i = 0; i < x.length; i++) {- e3 O! @: t9 j
text += '<li>' + x.text + '</li>'0 P8 o. A G) ?% E$ u4 O8 [; ^, d* t
} x/ |8 K9 R' d! ~
text += '</ul>'5 B3 T }8 A( U# t. y( Q) B' r
document.getElementById('demoInput').innerHTML = text8 K" l6 H. i( Y/ k( _! t
}& h7 V/ h! r! O" T% I
+ Q0 y1 r( j5 c7 Y5 J function editValue() {
! A6 O7 Q9 J* i" _ var mySelected = document.getElementById('mySelect')# n* g3 w" z1 Q x
var selectedIndex = mySelected.selectedIndex# l# V; q0 ]: x2 g7 o
mySelected[selectedIndex].text = document.getElementById('inputChange').value$ |3 O$ v' A7 c( v+ t! G+ I
}
& m5 M0 a$ B0 o( _- `
- N& ?2 ]5 N7 I4 g) N function removeValue() {
3 w, ^9 [7 m% c8 K& q var myselect = document.getElementById('mySelect') C0 w! [; D" S
var selectedIndex = myselect.selectedIndex( m) r: x1 ^/ H/ F
myselect.remove(selectedIndex)
! s% ^, @/ V+ m- U* ^ }
( u# P' I1 O z! e6 ]' a2 x function addValue() {
- Z$ p3 S/ X$ ?/ s; D7 g var myselect = document.getElementById('mySelect')
0 Z# n6 s, O9 b8 ?7 j/ Q& C5 S var addvalue = document.getElementById('inputChange').value' i3 m. S% k1 o
myselect.options.add(new Option(addvalue,"value"))
, w3 V& `- w0 f! o7 v, p }
- V' Y0 a8 }# ]& x! V </script>
4 L0 C8 V: ~/ s) T' l, |</body>7 L5 H2 u( U% R9 e- K3 ^
% ?6 V3 F7 F" b4 N. g" q7 C4 ~% G1 q) I</html>[/mw_shl_code]
! R( ?- @4 O7 z# X+ l8 R1 z4 D! I+ b |
|