|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
9 L' C- a- m# I) Z% v
4 m" n, p7 _8 H d
JS 操作 Select相关功能测试
, p4 ~4 N- F! h% ^$ F+ B/ ]4 N0 D/ T
3 B2 K) T1 t0 h: F6 F[mw_shl_code=html,true]<html lang="en">
4 y* z# F3 i: T
; s/ P4 Z, K2 |+ v& X: s) g5 }<head>
5 w w, k4 ]: Y0 A3 |' h <meta charset="UTF-8"> S& [0 k0 T) j5 O* R# T n
<meta name="viewport" content="width=device-width, initial-scale=1.0">9 @3 [7 V$ J3 }# }
<meta http-equiv="X-UA-Compatible" content="ie=edge">8 |8 x. w$ \2 R5 m3 ?( K
<title>Document</title>) D1 l0 s; f" m
<style>
q4 }. g! y* r; t * {
/ ^% L( C2 J( l1 U# ~ font-size: 10px;8 O( b. J( s' i7 H; b( L: W
line-height: 24px;
0 F2 ~2 |% o' p ~: Q, s }
( X0 @: U0 n/ I </style>: d& j/ X1 }/ H) Z: U
</head>" z1 @& T' p; w) s: ?0 Z3 |3 o: y G+ i5 ~
7 T2 X/ {- W$ x" G<body>
7 T* m$ l7 M2 d* L, |: L //this is for the select test
+ d/ J- T( J2 h; y& X: B% i <form id='myForm' action="submit" method="GET">, p f! h" L( ]1 W
<input type="text" id="inpuTChange" />/ ?, J4 p# {1 i# Q
<select name="selectFruits" id="mySelect">1 i3 Q% z5 l3 d& c! _
<option value="Orange1">Orange</option>
0 V' `) I; C, ^- w <option value="Apple2">Apple</option>
# {) b; h2 M; v( A6 K/ U, m <option value="Banana3">Banana</option>! }7 ?( {- R: P. L. j
</select>+ c' H, B- J. N6 i* l# j
<br>/ [. F9 {4 I) @
<input type="button" value="disable">
4 w \# L* J2 i: I" O1 k <input type="button" value="Able">" b7 D/ U, }5 C" L3 y/ k0 e, Z! c
<input type="button" value="getValues">
2 ? }! {7 [/ g <input type="button" value="editValues">' Y' N, h, A# P. ~6 y' A
<input type="button" value="addValues">+ @4 u0 e$ R* y! G& Q; j
<input type="button" value="removeValues">! X- z1 q) A1 X, _, O: O+ [3 S
<br>& Y1 s2 P$ `8 P0 j/ l o% T
4 s% D$ B2 J L9 q" S% }. Q </form>
1 o \+ Z& B ?, _, G; h7 B6 k4 l8 `) k+ Z8 @ w
<p id="demoInput"></p>
+ a8 E+ \+ J( a j: n+ X. [- ^# A9 D, `, a
$ j1 q/ h$ I" e$ V; m# X
<script># s9 c4 x7 _3 p2 o: S0 ^, D
function disableFunc() {. ]4 P) g9 [6 L3 o$ ]! o. D- g
document.getElementById('mySelect').disabled = true e2 k4 @6 h Z5 F3 p# g0 F+ i1 t
}9 r5 e) A% z" c7 C# X! j
function ableFunc() {; P1 O Z9 v9 x: r/ Z& X
document.getElementById('mySelect').disabled = false
" ~; h' s! K# v" q6 _6 T$ Z }: G% k* {- l. B! t
function getValues() {- G3 j+ b1 M/ s* n/ K3 j9 l
var text = '<ul>'
! U1 c a, d- O) e var x = document.getElementById('mySelect')
+ A5 W; S& \1 @- w6 f5 |) N for (var i = 0; i < x.length; i++) {/ J5 G. p0 f6 H) `! f1 [
text += '<li>' + x.text + '</li>'
- I! O- s, l' d1 E0 ` z% _ }
' J$ u7 B. X2 C9 n text += '</ul>'+ j; Q* S. J6 Q) r
document.getElementById('demoInput').innerHTML = text
+ Q8 u" W, N8 p& G } ]3 \/ [, w/ q6 y1 \7 D
- T. H. E/ c" T p5 m3 D function editValue() {
1 P9 m' x3 Y9 a; p" w' V' F7 ~% N' [ var mySelected = document.getElementById('mySelect')
& t/ I0 N6 Y0 u, n7 _/ C var selectedIndex = mySelected.selectedIndex' I O( h6 t9 S/ i6 B7 k. q
mySelected[selectedIndex].text = document.getElementById('inputChange').value" i7 A+ H' {, W
}
/ q) H6 z2 v' `3 Y: {4 ]
3 }5 B6 a$ Y9 j function removeValue() {
% a8 ]/ r0 k7 U% ?+ i var myselect = document.getElementById('mySelect')* L; w, l* X8 V ]" k3 f* U
var selectedIndex = myselect.selectedIndex
. x0 y! t7 g% `: D myselect.remove(selectedIndex)
& [ C2 I- l7 l ?% e/ ]. U; q }" w9 d2 ?+ `/ R# g0 d
function addValue() {$ ~! E( Z5 z0 R& z4 R
var myselect = document.getElementById('mySelect')# R1 C1 p( k3 j( h: D+ ~
var addvalue = document.getElementById('inputChange').value
3 {6 D% H- N% k2 J# k& K myselect.options.add(new Option(addvalue,"value"))! r% R7 y( ~' v
}
+ C& R1 h* y) o; j8 `5 k </script>7 p5 B U4 Y6 ?3 q! a& m" M
</body>% s% G+ H- W# A6 F- ]( u2 P) \
3 ~- \: P* S3 A$ _9 L: I</html>[/mw_shl_code]
# X2 C1 O7 |8 K& [* o$ m9 z |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
