|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
1 i* c! R7 L4 z5 G. S: Y3 C
- }& q; F$ F' z* I& n" Q
JS 操作 Select相关功能测试5 j, H- h1 g" }- `5 F Q
+ n/ B$ f5 H; q! G8 v[mw_shl_code=html,true]<html lang="en">4 v! T8 r3 U. i3 \, _
# V, d' v9 V. u3 w5 Z1 I! q
<head>
2 S7 R. P) e, l <meta charset="UTF-8">0 v5 e8 z) X' I1 G: N1 y( i* x
<meta name="viewport" content="width=device-width, initial-scale=1.0">/ R) A* G) |' o+ h6 Q& _
<meta http-equiv="X-UA-Compatible" content="ie=edge">+ o) i% |/ s8 g3 `2 v/ M
<title>Document</title>0 Q! S' `+ Z! w( z
<style>
. P }" Z, K) ]& B5 C7 k * {
" w1 M) R3 c' R# n) h5 B2 K, o font-size: 10px;8 W! n2 V& {$ E1 z6 Q
line-height: 24px;# X! c. v3 W5 [8 o/ k
}) ^$ m! I3 F4 U' Q) I ?
</style>
6 ]( V) |! ^" b* c3 o</head>
8 z, r5 v, B" F
6 X+ `7 | g' `) A; G0 f<body>
; ?, ~/ ?. ]( L //this is for the select test
* j: |6 e3 i5 [ <form id='myForm' action="submit" method="GET">. F, h7 g7 c9 c, ?! x% r
<input type="text" id="inpuTChange" />
6 U& h8 x8 @- X P8 j! { <select name="selectFruits" id="mySelect">7 V! t& I1 }- F: e2 m( j; D
<option value="Orange1">Orange</option>/ u7 p% k* ]" {& F. N9 i# j7 @0 G
<option value="Apple2">Apple</option>
! ~, w; \' U/ y# S7 n <option value="Banana3">Banana</option>0 j T4 O% l6 ^; ^* B
</select># T6 Q! D* A7 x6 q1 P, V
<br>. w1 U* @% N! O, X$ ~- {' C$ h
<input type="button" value="disable">
g% n" w: q. S# @: H+ j6 C <input type="button" value="Able">+ R. \' R! u, B/ k: A8 ~2 H$ G/ N
<input type="button" value="getValues">+ j4 c: N* R& r
<input type="button" value="editValues">
A" z" ~" A( d5 z. G& i; J/ o5 ] <input type="button" value="addValues">
2 Y* i- I# i! L* k <input type="button" value="removeValues">$ e4 ~# V6 s8 C$ y) @
<br>: y7 z6 B o% f$ a
) W* [! d2 a4 l" L- b- ~ </form># G8 v! p+ \. ]+ C+ V$ U
! q4 d) {4 Q& J5 L8 j* _ <p id="demoInput"></p>
: s0 f% x# v: {8 P) d# N) h. |1 ]4 l" d* W' d
) J1 ^2 F. x* o, o* ?% x+ a <script>0 i7 s2 [7 o9 P- `$ v0 [
function disableFunc() {
! J5 Z& X3 v& K5 d/ \- i document.getElementById('mySelect').disabled = true
5 r* x- x5 a, u. Y7 `% |* T ^' ` }
9 c* Z h. S+ }" N# I, X( l function ableFunc() {
$ @5 }3 A4 Q6 j9 E- t document.getElementById('mySelect').disabled = false2 [( ~& w( l: S% `* e6 U8 s1 i% M) G
}9 P7 w4 `+ g! T' f
function getValues() {" C. L) u0 s6 E" @5 y9 g
var text = '<ul>'$ K5 m9 h1 z% l" B
var x = document.getElementById('mySelect')
; c5 u2 g# m/ s0 R- |8 D for (var i = 0; i < x.length; i++) {4 e! N3 f8 N% _6 M {' g8 O
text += '<li>' + x.text + '</li>'. o' r: @) f1 p4 W: J
}7 M+ y/ v0 P8 m( W
text += '</ul>'
[ W: j% S& i9 [ document.getElementById('demoInput').innerHTML = text( R& c: u) N+ m E% ]
}
% Q& a1 V# X8 Z- T# x+ \: S
7 c" ~+ J* X! I5 S E5 { function editValue() {# ?- U! T. o% e3 b
var mySelected = document.getElementById('mySelect')/ b& E/ C, Y! I
var selectedIndex = mySelected.selectedIndex
S+ z8 J- u8 Z: Q X1 l mySelected[selectedIndex].text = document.getElementById('inputChange').value6 Q6 E( p& x! }2 r7 x6 i
}, f. @. F7 `0 f% f+ R) q; c) t
7 t+ f0 R, D9 V7 {& U
function removeValue() {% k& E6 N }; H& b+ N. D
var myselect = document.getElementById('mySelect')
: G6 V, ~8 c- Q4 K var selectedIndex = myselect.selectedIndex% ^1 T6 I( R7 ^( s5 D2 a" U
myselect.remove(selectedIndex)* u, ?* V1 X# {1 c3 r
}# p; P8 B4 P k) b
function addValue() {
6 j# E2 x% U: Z, z, s6 q- M) { var myselect = document.getElementById('mySelect')
8 C8 o! A' L4 I" [7 C9 I3 P+ I var addvalue = document.getElementById('inputChange').value
8 F( H K3 t: t n+ y! Y2 g myselect.options.add(new Option(addvalue,"value"))
& r1 y% }$ u$ @9 S" ] }& M' d8 v) m0 \: I+ j( S$ Q
</script>
% q4 w6 c8 t/ W4 X6 x, T) U</body>9 ~8 R& ?3 C- Y+ F& u* C
; }9 K4 A2 G- v7 C
</html>[/mw_shl_code]7 J u* t, E( o/ c5 u. l
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
