|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 P' V( ]+ Y5 ^+ W1 z$ v" @
+ J/ v+ p( m% {; ZJS 操作 Select相关功能测试
3 O9 O* E, Z+ X7 Z: J
! F; c; |0 B, R9 L; ^: q% C[mw_shl_code=html,true]<html lang="en">( x! c. f* L% _9 E9 J# _7 o
2 r u6 x7 x9 t2 z" d5 H1 v<head>
% Y+ ?. O3 U9 c: f <meta charset="UTF-8">4 [# @4 I" F9 F3 v
<meta name="viewport" content="width=device-width, initial-scale=1.0">" f/ {+ J u+ _( c; h5 d% e
<meta http-equiv="X-UA-Compatible" content="ie=edge">
% ~# V# L8 Y% t- ? <title>Document</title>; ` s0 g5 B5 N& d7 g7 `
<style>
5 @: n% V2 m4 _6 z$ s, X * {
& r& R2 L, W2 l+ r* d" I font-size: 10px;2 j. \& B# K9 C/ s# R! L
line-height: 24px;3 [/ t# i" ~( F$ k1 ~1 I
}
& g% [, i% E# m4 K$ d </style>
. ~$ W m8 F% e- {& @</head>9 X; b5 g, r) M* P- q
+ B2 C R1 _2 a u8 W9 \
<body>
u) \% I" b) T0 \; P* ` //this is for the select test5 \. X |3 C9 j- m: v
<form id='myForm' action="submit" method="GET">% j4 a# {) V1 ^- U+ Q
<input type="text" id="inpuTChange" />
9 c8 i! n# O+ o b/ y. R <select name="selectFruits" id="mySelect">2 t- E# O( R0 ]" e$ E% d
<option value="Orange1">Orange</option>6 `0 m5 g$ B. @7 ]
<option value="Apple2">Apple</option>2 ^ j$ D" w: R, R! Q% Q5 [
<option value="Banana3">Banana</option>: K1 A7 A* }9 k. Y
</select>
; Z& J% b$ J4 t/ [2 m. Z <br>; C% ~! \6 _6 S
<input type="button" value="disable">: }5 P6 E' M8 b3 Y' B
<input type="button" value="Able">
: r5 e9 ~1 f$ _; Z <input type="button" value="getValues"> h+ }" D) Y9 _% F* g7 y* m
<input type="button" value="editValues">
0 M2 F2 X/ g4 H) }- k <input type="button" value="addValues">
' y' B: w+ I" Q9 k: Y$ F <input type="button" value="removeValues">
6 P/ V. U/ n4 f0 p% K$ N) }8 a8 R <br>
+ t2 b) e) E# o8 t8 v; r# c# Y, \9 ?8 ^1 i. A9 B L# P' ]
</form>1 K( V5 \4 v! ^5 S6 V) f ~
# h G* A( w2 x0 v3 e5 j
<p id="demoInput"></p>
% D# h9 _' p* _+ u: d: p2 M
1 v' w% Z; B2 ]
M+ A) s$ s' z9 u <script>
$ y* |% p( k( U; f# C# l7 d function disableFunc() {
4 ^2 T+ o0 ^, V) {& u" s( o, m; g document.getElementById('mySelect').disabled = true
0 W- R4 ] Y/ x5 I; _ }6 V* V) p& Y x8 G0 w* }
function ableFunc() {
9 e2 {5 D. q2 O/ {( a/ z$ T document.getElementById('mySelect').disabled = false
$ \1 a$ m+ v( W) Q } v1 H+ m, x, v; ^3 [" Q4 O3 v5 `, G
function getValues() {8 B$ M1 p7 K4 k5 ?+ N
var text = '<ul>'
9 ^) D8 e# j8 @* B- X* w; s var x = document.getElementById('mySelect')
! h" S1 K/ n7 V4 |2 g* n3 v1 n$ |+ j for (var i = 0; i < x.length; i++) {3 b# P: m, I k/ R
text += '<li>' + x.text + '</li>'" `, L: x" E5 N$ o9 V1 g; K( p: ~: K
}( a- x, N# o* W# S2 M" o4 r& O9 r" {
text += '</ul>'5 J. x- i7 K* n5 O
document.getElementById('demoInput').innerHTML = text
& W) z9 ?* d, [/ A% @; E* p }3 t6 W1 z0 g) ~/ M7 k" ~
) u& C5 i8 R- h
function editValue() { k/ R8 y ?: o2 Y9 u- |) T
var mySelected = document.getElementById('mySelect'). y# h: Q s3 w8 P
var selectedIndex = mySelected.selectedIndex! Q9 U. P1 W2 ]- j3 S' E4 i U
mySelected[selectedIndex].text = document.getElementById('inputChange').value
) c" ?/ d8 T' X% u# S1 P" R' k9 x }
! T! ? @; @" F5 c& X
7 U. H1 D; K) F, g' @! q) O5 S function removeValue() { C4 f5 w) l: Z# J* A+ y( R
var myselect = document.getElementById('mySelect')
- H+ T; a7 l9 G2 {# F! h var selectedIndex = myselect.selectedIndex& Q: i: o( R; p9 F
myselect.remove(selectedIndex)1 L1 C2 r+ S! K! D2 L0 D' W
}' Y+ K8 e. D( P3 |
function addValue() { F. N5 N. \; q# u+ n
var myselect = document.getElementById('mySelect'). h5 f; a8 I% h6 c: J- u# p
var addvalue = document.getElementById('inputChange').value
2 z1 o1 v0 ^) A0 q) [3 z myselect.options.add(new Option(addvalue,"value"))
) S" O7 c3 K9 a! N }' { g/ h2 J/ W, H; e
</script>
: N+ H M- Y0 e, [( f# y2 s' ~- ?</body>
! b8 g0 C$ U# V9 o5 v0 ]9 o+ F. ]; q5 W2 o
</html>[/mw_shl_code]; a& I X8 H: `& q* Q8 k, W2 K
|
|