|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
$ l1 \; w6 E; ?2 z" X9 J: @8 Q' `: m, x& w+ l6 ]4 L& W
JS 操作 Select相关功能测试6 |( z' a0 F7 Y# r7 f6 s
3 y7 n8 P. k- x1 s% z! G
[mw_shl_code=html,true]<html lang="en">
' r* x! ?3 B9 X2 a5 o- r- m$ A8 F- X8 D6 t
<head>
6 P9 F, H: g5 Z2 X0 X: K' I) @ <meta charset="UTF-8">. O, z9 o0 J4 W& C6 R
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7 m. R3 @7 T% F! a* S <meta http-equiv="X-UA-Compatible" content="ie=edge">
5 S- C5 [9 L4 ~0 ~. P; B: x <title>Document</title>8 F% `0 [( v3 m; P: c C
<style>; _ l( e. [+ H/ K3 c v4 `2 T
* {+ Y4 | J3 \5 T
font-size: 10px;" M6 l( {7 J3 d U. f) W% J
line-height: 24px;1 o1 n) J7 i* P% O* p* q
}
2 `9 j1 h5 Z8 W$ t; S </style>% Q; K) z2 [5 a* m! @0 ?# v
</head>9 P8 n. N) b* A
3 j/ F2 i3 a" ^
<body>9 \0 `3 Q* {5 Q" Q+ J) a/ E# z
//this is for the select test) Q( A6 g3 \: L0 q* s
<form id='myForm' action="submit" method="GET">
, }3 o7 s! J+ _7 r7 {0 p, ~3 h <input type="text" id="inpuTChange" /># u8 Q1 H9 F5 D/ P) Q8 `
<select name="selectFruits" id="mySelect">
0 Q" j% R5 c5 V2 w <option value="Orange1">Orange</option>5 o0 [, Q8 X! C3 P
<option value="Apple2">Apple</option>
% T7 q1 ^ O. c# Q0 m, }- j5 O <option value="Banana3">Banana</option>/ z7 y9 C2 g, V0 k
</select>$ S) ]" g4 I! |3 o% i5 a* R0 y
<br>/ S9 \4 `0 }& P& ~: F
<input type="button" value="disable">
# f. A# r2 e* L2 b/ |) V <input type="button" value="Able">4 q0 s3 c0 S* I9 q H
<input type="button" value="getValues">1 b1 H8 ~: h9 N5 B+ R5 \
<input type="button" value="editValues">% X. w* ~& {5 M! W* z0 q
<input type="button" value="addValues">) P- k3 T: A, `* L' ]; U$ g
<input type="button" value="removeValues">+ C) Q4 m5 v; a6 s ], w& h3 g1 i
<br>3 Z% ?5 A+ i4 O# _' B
7 `8 \3 o- u2 j# `8 d
</form>/ N* a( V8 U! W% ]$ }6 ?
. w- M8 y4 r& }8 ?
<p id="demoInput"></p>
/ {$ z% W, B5 a$ h7 v5 u2 [! B) b1 y1 Y1 k, I% t( N5 I& F2 }
; ]- ~- Y) J) E" u/ W <script>
* Q8 q- ]$ V! l function disableFunc() {' X- p: ]3 ^9 D( J
document.getElementById('mySelect').disabled = true0 J: F8 _3 L6 x* n0 s+ P) }
}0 ?* m5 q9 F+ p( [
function ableFunc() {9 a- V$ j; T* Q7 ?
document.getElementById('mySelect').disabled = false
% R! T6 n# W+ }/ \1 z7 [0 D6 o5 U3 c }
- v: J/ i$ w* O/ j9 u+ G0 M2 t function getValues() {
9 W0 A1 m% J) W- @5 n var text = '<ul>'
2 x6 U7 a2 s- z/ c. Y5 B var x = document.getElementById('mySelect')) O2 M& V7 w% @" q7 f2 N
for (var i = 0; i < x.length; i++) {
( F0 ~. t4 j' O/ Z) A& e3 V text += '<li>' + x.text + '</li>'
5 u/ a8 V: V' e" o }+ N8 Z/ D( q- Q( |8 u1 y
text += '</ul>'
/ I" S, U: Q/ C- ? document.getElementById('demoInput').innerHTML = text
- L+ E* ^) a9 U: O$ y8 G }' i$ ]+ J) B' V/ {8 ~1 |% ^' e, z
# p r2 ^) e) A2 R( [* S
function editValue() {3 X! \0 i/ e4 ~; x( w9 A0 U7 ~
var mySelected = document.getElementById('mySelect')
% N( N9 M) r+ _: E8 E var selectedIndex = mySelected.selectedIndex+ t, c" F; L* h- G7 }
mySelected[selectedIndex].text = document.getElementById('inputChange').value% m! u% g6 D4 y2 E0 l
}# N0 d8 |, S, B
; z" k) ?4 C5 L5 l6 d& |! {. g
function removeValue() {4 o$ z2 A5 n% w* o/ N
var myselect = document.getElementById('mySelect')" W# w9 L6 @$ F4 x T/ A2 ~( g9 [6 i
var selectedIndex = myselect.selectedIndex
" p0 X1 j! f! d" i9 ]( k0 P myselect.remove(selectedIndex)( f4 U* @5 q/ h. A, b* w
}3 h9 c" w* t7 V" N/ k+ X# F& a
function addValue() {
- g1 D- H7 b7 h7 \# n var myselect = document.getElementById('mySelect')6 g! h7 D7 m3 J8 l/ `. G2 ]# `( j
var addvalue = document.getElementById('inputChange').value" I" L4 m0 ^6 E- l4 r$ o9 \
myselect.options.add(new Option(addvalue,"value"))9 {4 v: D+ |1 p! x6 e
}. ~* R% \5 c2 w: {. U
</script>
7 o$ @6 [6 ?) d# d, ~' o2 u# u</body>8 O: R& H' q- k3 n- \- x7 J+ n; H
) l% I y; V0 J( a2 f" H</html>[/mw_shl_code]
9 q( u6 {8 z7 l4 I |
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
