|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
" u9 H' l1 j: p& j7 ^$ ]. B+ o6 `
% Y# _) B1 S% r) T/ Z
JS 操作 Select相关功能测试
5 K- g6 p- v8 x7 ]2 h0 _! B
# j" s s/ D6 {# v[mw_shl_code=html,true]<html lang="en">* \2 f& T0 t6 H$ m0 C
' C( x) Q$ O& `, s2 ?5 l O. J. H; f<head>
$ W4 C7 x, @0 ^" t* d) d4 l <meta charset="UTF-8">" J* h V' C5 N+ u( R1 M, p
<meta name="viewport" content="width=device-width, initial-scale=1.0">
$ u/ a% u& G5 a, C <meta http-equiv="X-UA-Compatible" content="ie=edge">
& t! M ~" r, u7 Y! Q* v <title>Document</title>
' O: i. d3 a! D$ k <style>: [3 x* ?3 T+ ]1 r( v
* {- t9 ?/ K+ V% o. q1 D5 B
font-size: 10px;
7 V# z% g d: | line-height: 24px;* t/ `" P% {5 `* T; Q/ p* y8 M% @2 [% T
}
. s! l2 e* ?, {+ L </style>
' |4 |- E, c& z8 H& n+ p</head>3 d( r1 B2 w" _+ T# S
+ k/ Q3 a8 ]9 Z4 u- P- I5 O, X
<body>$ i6 l( Q3 }6 n i) K) U$ Y, l
//this is for the select test5 x# Q0 U& X# V" Y7 T/ L# a
<form id='myForm' action="submit" method="GET">
# @8 M y! S3 P$ `+ r2 P <input type="text" id="inpuTChange" />" D" f" [# V- W( v
<select name="selectFruits" id="mySelect">
7 ]- y2 @- _" N <option value="Orange1">Orange</option>
3 ?0 W0 ~' o5 `& @: G; R <option value="Apple2">Apple</option>
+ J3 B' }8 N! N i- f <option value="Banana3">Banana</option>/ |# n) d* S: i/ k
</select>, C8 H4 l- p, ~2 s' M t- K7 N
<br>2 x' I) I* w3 Y, |4 {
<input type="button" value="disable">
! s7 y2 n% G- [4 R7 k <input type="button" value="Able">- P9 w4 G0 c4 v) X3 x: c: J
<input type="button" value="getValues">
3 E% d. _2 m! s. _ <input type="button" value="editValues">! h3 {6 K6 }* n1 o2 |6 i+ }6 D5 `
<input type="button" value="addValues">
. j2 V" O6 ~; k9 W/ g, k <input type="button" value="removeValues">
2 x7 c, R9 Q) h1 F3 R% G <br>
/ C+ N# ~0 R" E, U; m$ e3 l9 M( t$ K3 J* [$ x
</form>, v1 R' Z) v6 f) m5 O" ~2 T1 w$ E
# W3 e( k6 T$ V ]: V7 W) ]/ r) P" Y
<p id="demoInput"></p>
0 B* `5 b8 n/ K" i% u1 F ]0 ]: k5 p' {. V. ^2 [9 |
7 V% J; P9 a0 _1 T7 e a3 A1 R
<script>
) _& U- f; h* K# {) a3 m function disableFunc() {
2 A' X4 n6 O! |" c- m6 `: i, ] document.getElementById('mySelect').disabled = true
* c7 }% f' f; j; o' N }" i6 D7 N; m ]( [3 i: k
function ableFunc() {
J4 X y: D; T/ R document.getElementById('mySelect').disabled = false
9 m0 u- P; `) O/ N; o }
) `' `( X4 t% x* C6 z9 i function getValues() {
/ B, V) e" @! e, e6 z( i8 ] var text = '<ul>'# X6 z$ Y5 G; ^/ I2 x! S c
var x = document.getElementById('mySelect')
, O- @+ }, f6 { d for (var i = 0; i < x.length; i++) {
0 q0 ?" a5 z$ c( m% n1 W$ E text += '<li>' + x.text + '</li>'1 p. b2 U+ _% u) f7 s9 K
}3 Z, _3 r& y5 ]7 `8 ?; J- x! c
text += '</ul>'
% y* t5 }8 k" o! x% t+ F" Z% S+ k: e document.getElementById('demoInput').innerHTML = text: I: n( c7 M5 x* v2 w) f
}
5 ]/ q, f7 I! f; X, |) n8 Q2 z m) L4 N, O
function editValue() {
* u4 Z" B- P/ o, c, z. m var mySelected = document.getElementById('mySelect')
) l' F9 \, k1 e' P2 u2 }6 n var selectedIndex = mySelected.selectedIndex
1 i' T- s% o1 W2 D( U& E mySelected[selectedIndex].text = document.getElementById('inputChange').value
' H! ^ ]3 B+ A# z. B F }; X n8 _$ J& z* k) p) x1 ]
( b2 M3 `; b6 n& H function removeValue() {
+ r O0 g% ^1 J4 A var myselect = document.getElementById('mySelect')3 G) {3 p! }% l- d4 _8 M( l
var selectedIndex = myselect.selectedIndex
' ^& [1 d, F' ~- D6 s myselect.remove(selectedIndex), d( l: M! _$ P* `" y* l. U
}
! y$ m4 R6 q+ v9 g function addValue() {
- H) j! e. a' k2 n% v# w var myselect = document.getElementById('mySelect')
: f( K J- ]6 M3 B var addvalue = document.getElementById('inputChange').value( j3 [' Q! U9 N
myselect.options.add(new Option(addvalue,"value"))
6 h4 ?4 W7 E+ K6 w/ e }3 Q0 y. a% E% w" F* }
</script>3 Q. K8 R* |5 c) {. Y( t1 }
</body>
5 l+ ?" y. C8 l8 r7 V* X. ]& ] k$ _
3 J, Y7 {( f1 i</html>[/mw_shl_code]% `3 t8 k2 L, H& r4 B. Q7 D
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
