|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
! k+ P, |9 H- P/ \% ]) D$ D
/ w! j' E( ]4 c+ SJS 操作 Select相关功能测试/ m# I2 u- W" N0 I: D, G2 B
& X2 f3 _( ~2 W6 c[mw_shl_code=html,true]<html lang="en">
+ O! h+ }5 Z3 N; d; M `
: `# `' w( K! G, i: P2 {! i! [" }<head>
$ B4 _- H: O# M# O* o <meta charset="UTF-8">
: i/ q0 V- B% I* w8 e7 ^. U7 e <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 [, j2 t, D# K) e <meta http-equiv="X-UA-Compatible" content="ie=edge">
0 Y1 H: l. ?4 x3 a5 U <title>Document</title>
0 ~) X3 a" Y/ J) K2 P7 P# L" Z) _2 @ <style>
: z0 Y7 e0 @( f. I& U9 s5 F% p: S * {
3 ]0 k2 R' `. k1 v3 v% t font-size: 10px;
& |, M. b2 ~9 V- l line-height: 24px;
7 \2 f* u' o" w$ C# ~& X! ` }: a3 l7 v) o2 |& v: r
</style>
0 W9 G% x9 V9 ]/ f</head>" O: R4 D9 c! N# l" k
$ ?7 K. y3 y% N, n. ?+ e# c<body>
; M& Q) x- r3 q, y) K //this is for the select test
: J$ ?* j8 n4 h$ }7 r9 M <form id='myForm' action="submit" method="GET">% K: c! H( ?9 {* V3 F# M1 R9 }8 [5 ]
<input type="text" id="inpuTChange" />
7 A& t, o! ?4 M <select name="selectFruits" id="mySelect"># D3 r2 B+ Z2 x' r0 Y
<option value="Orange1">Orange</option>
( G5 z2 n/ A6 r3 B7 ] <option value="Apple2">Apple</option>
+ E( T; d3 g0 ^) n6 U# [ ~) q' G <option value="Banana3">Banana</option> O' J' [# m4 A$ S' E: e
</select>$ ~7 {. a i4 p: L
<br> T( K% f( |1 ^! ^/ ?" L' W+ j: D
<input type="button" value="disable">
9 c6 Q: x4 E! H7 R <input type="button" value="Able">
$ i# I0 m, x; g: M8 Q7 R, a <input type="button" value="getValues">
( g& Y }, ]- V* h4 _ <input type="button" value="editValues">
% S) X7 p# Y; h6 H- } <input type="button" value="addValues">
, \* r! A4 o) J y. X H& o <input type="button" value="removeValues">
( `* ]7 S0 c4 g X5 L" L- f <br>
& x4 j8 V$ y5 [! o! T5 t0 s
. d/ ?* g; ~. W5 S' [ </form>
" U6 Z2 I j5 P6 H9 T2 X% q1 p/ j9 s0 H
<p id="demoInput"></p>
6 z/ r+ P7 Q# U1 n% P9 U9 i+ v) V# f v
; L: i9 u: O1 r( J2 C! I <script>0 f3 r. w9 Z' `
function disableFunc() {
1 r" o) w+ @# R document.getElementById('mySelect').disabled = true
F/ ?# [* `7 L6 _* E. e }
) Y& u8 K7 G2 P# Q) r+ [3 ?: ^3 N function ableFunc() {
. ?# V+ ]7 ?( u* |+ u+ k document.getElementById('mySelect').disabled = false7 I) t* \6 U5 Z* G% T7 ?
}
* ]7 m0 O1 q1 b0 l5 Y function getValues() {% T# c- G8 }2 l* _ T
var text = '<ul>'. b0 W, [ V) q( I
var x = document.getElementById('mySelect')0 u2 h) T$ ]- Y; v: _2 X* t# @
for (var i = 0; i < x.length; i++) {
+ U2 @; Z9 U) x/ d text += '<li>' + x.text + '</li>'
" }, @3 j. v+ w }+ \1 X" O& z8 K+ A6 I' ^: Y
text += '</ul>'9 h A, i& B# z; {. @% h
document.getElementById('demoInput').innerHTML = text
. H+ x/ K! N0 X }
. P6 z/ X2 h% e. K( n; \& \' t) |( T
function editValue() {$ U7 y: X% b0 F# r- U9 D; u- h5 L
var mySelected = document.getElementById('mySelect')
3 N, o* y7 E# M4 ]- w- J! G0 b2 [ var selectedIndex = mySelected.selectedIndex% F% W% P$ i, m2 n( y3 W" c0 h v& \
mySelected[selectedIndex].text = document.getElementById('inputChange').value' S, Z3 H0 v4 n: \
}
8 a" c' T- a/ q0 I2 {
$ N( @4 J+ D" `# h6 L3 [# ~ function removeValue() {& w9 x; K- h- Q( c+ b& L# R
var myselect = document.getElementById('mySelect')3 W6 _/ a9 l* @/ K. K- R
var selectedIndex = myselect.selectedIndex: t R+ y0 ~- Z2 ^! f5 m
myselect.remove(selectedIndex)
& o, _7 w1 S0 \( e }
0 X) S9 ~) X. t% g" h9 O function addValue() {
9 x: q- t: h6 k9 N: L% w var myselect = document.getElementById('mySelect')& u4 @) N3 H" S& l& E3 J
var addvalue = document.getElementById('inputChange').value- o& ?2 C* n- g% z
myselect.options.add(new Option(addvalue,"value")) h3 S& ?* G" {9 h0 b
}
% p4 u1 g: d. W1 z0 w* \: g </script>
! U5 L, D/ y+ `3 e7 z</body>% `$ N' N, g) H% v( j' h
) L$ @# Q. g$ j0 `+ l6 K</html>[/mw_shl_code]
6 K5 w u, N. j8 v |
|