|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
×
9 u" A4 I0 w1 g3 }% c# c/ v- N$ T/ m. m
JS 操作 Select相关功能测试, s* `& v r5 k) b/ T
* L! c5 W" U- X' g0 I5 E* w[mw_shl_code=html,true]<html lang="en">4 ^) u1 E" C* o" x
. C& j* c( C# K<head>! {$ m1 S2 o) A
<meta charset="UTF-8">
+ p ~5 k/ n1 ]# n <meta name="viewport" content="width=device-width, initial-scale=1.0">6 k( l; J! R" B: W0 E9 i) }+ j, [
<meta http-equiv="X-UA-Compatible" content="ie=edge">/ W1 r9 |, h$ D; k+ U) O
<title>Document</title>) g. n y, |+ X0 F
<style>. @- E" l4 K7 N9 D/ d
* {
: a# b+ r/ o( s3 \ font-size: 10px;
2 H- f2 w5 O& @6 m line-height: 24px;1 {. _5 U, s. z' S: x
}4 J8 a6 l8 C/ V' q Q b
</style>& w, b& \* o0 k1 Y( F. l7 T" {
</head>
* L" H/ K* D" f8 F6 p1 m1 w# t7 z8 c' D& v' u w O
<body>' ]3 V' j% _3 X* y
//this is for the select test
# d& F+ Y5 ~$ `; w" { <form id='myForm' action="submit" method="GET">
3 V" J3 d; f4 d4 r <input type="text" id="inpuTChange" />
) ^: c4 w1 e: V. u- Z5 g) h; k <select name="selectFruits" id="mySelect">
' h5 u& D% x) H9 {+ N; l <option value="Orange1">Orange</option>
9 E$ c$ Z. W# R; l+ R% s) A6 @ <option value="Apple2">Apple</option>7 R5 }9 v: X0 E: N) v5 J; e; e
<option value="Banana3">Banana</option>' X+ [' {+ `* ^3 `9 D' S
</select>$ b4 C2 V. u9 w" d% d( \9 I
<br>; B7 p2 s* ]) V
<input type="button" value="disable">
/ _0 j0 _: ^* W! Y <input type="button" value="Able">* {) f) E8 @$ j" _
<input type="button" value="getValues">
$ o3 g7 a6 Z1 v& O, N2 b# f <input type="button" value="editValues">: N" L! G6 D3 R1 E; _/ ^
<input type="button" value="addValues">
/ F0 N7 z1 X- r( G4 R7 I <input type="button" value="removeValues">
6 _$ {# {9 ]+ A0 m <br>& y4 w" O* Z2 \
7 h% O) x# r0 @% f3 m$ x1 v
</form>
& c& T8 L0 g. j$ A) D2 z" P2 b* p/ a6 C, Z2 Y$ C
<p id="demoInput"></p>
2 ? ~1 i' l+ G) ^" Q- D1 k, \( v% E
8 n) Q6 l* c& O5 R, E, P
<script>
$ b0 S4 Z1 j. m" A function disableFunc() {
/ [! }) Y$ g6 X3 t; ^( G: Z document.getElementById('mySelect').disabled = true3 A' G9 A3 ?+ R% R# E0 Y0 r8 U* n
}
4 T. s. }' S# a function ableFunc() {
' S5 J, _. L( F document.getElementById('mySelect').disabled = false
/ l0 e$ o' F9 X }
/ D+ i: m( N0 B7 u3 L: t function getValues() {
) z) {* w4 Z V/ | var text = '<ul>'& ~6 H; w9 E5 _* B
var x = document.getElementById('mySelect')
: f/ A/ g. J h- X* _& J for (var i = 0; i < x.length; i++) {, [0 k( A) |& T8 b+ j
text += '<li>' + x.text + '</li>'! }* p( j$ S; ^( H
}; V4 {8 T, @4 b! f* J
text += '</ul>'
4 [7 r& H4 F; K- M2 g document.getElementById('demoInput').innerHTML = text/ y ~9 D& H2 n
}& \* ^% w5 j: R* @- N
* m P6 ]* X3 Q! L* k" r' O+ f! c function editValue() { }8 O2 z2 K3 n8 c* j5 A# n9 G
var mySelected = document.getElementById('mySelect')
- P+ L3 ^* W( s var selectedIndex = mySelected.selectedIndex" f5 w4 B1 y/ ?
mySelected[selectedIndex].text = document.getElementById('inputChange').value
+ h4 `" `* f- _3 e. C }
L: \: N7 ]2 w- s* y0 N, O8 w
function removeValue() {
4 n' F7 @2 N% l+ a2 Q, x) H* ] var myselect = document.getElementById('mySelect')
3 Z. X2 X: ^ s* w: K+ U var selectedIndex = myselect.selectedIndex
* c: W3 ^2 b* {5 W+ g2 l# p myselect.remove(selectedIndex)4 N t6 J r; P% t& Q
}
9 M# T& X$ R' J function addValue() {
$ c1 E- y$ Y0 N" K6 b6 {% g0 w9 U var myselect = document.getElementById('mySelect')6 t' E2 Z& B, @6 A9 S4 w( z
var addvalue = document.getElementById('inputChange').value& f0 J Z: x* d2 {$ @" B% x. C
myselect.options.add(new Option(addvalue,"value"))
7 N# q1 L: j+ F0 I }3 v# s& ~6 H* ]) L4 b6 n
</script>
( W/ e" k# t) h) _+ \# I: w9 g4 C) X</body>
0 A" Y% m. y9 ~4 g8 X4 @. C" E9 T7 ~$ b6 S, }
</html>[/mw_shl_code]( \1 t3 x+ ^& V: N1 D5 p; E) `
|
|
发表于 2019-11-4 20:15:32
