|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
x& R! B9 O4 z l( y
! f1 ~4 M# w' Q$ yJS 操作 Select相关功能测试
o1 Y, o% L* p9 O& a7 t# W( A E- o4 o. @
[mw_shl_code=html,true]<html lang="en">1 }# k7 e; k6 x4 f. W
; T" T* k* d k9 H<head>
: X. ^+ e# i4 M: [+ Q6 I% r <meta charset="UTF-8">
# l3 H# u; e, F% |8 L4 ] <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ d6 S* ~& Q* U. h0 z* n2 ^' v <meta http-equiv="X-UA-Compatible" content="ie=edge">: R* k: g' _' L4 B
<title>Document</title>
& r9 `" ?) m# T0 ?; v0 K <style>" J, L; c) o% j3 R9 Q4 I
* { Q2 [% o+ x, c. ~1 ^1 r4 O
font-size: 10px;( o; O6 W. j7 o2 x
line-height: 24px;
9 ^0 }( Y, O- ? }6 @4 Z6 {9 z Y' g& L: e6 d
</style>
& E7 h/ L8 ?6 ~$ d' @: l9 s% D, C</head>
5 u( z0 q2 f2 }* R" S2 K5 f& E
$ k: u% U0 b1 C<body>
% `4 K- E, ^) F7 T W //this is for the select test6 i! h* H: r% X1 e6 o
<form id='myForm' action="submit" method="GET">
^8 V. W! B: {4 s: }/ j$ U, Y <input type="text" id="inpuTChange" />
" l, ^9 Y- y; i4 N9 C: W. s) x0 h <select name="selectFruits" id="mySelect">2 w/ i1 A; e/ U: u) v
<option value="Orange1">Orange</option>
6 e) w/ C$ r+ @# U% k) p <option value="Apple2">Apple</option>
- h6 l1 {9 [2 H" p" {5 p( M- y, p8 _, D <option value="Banana3">Banana</option>9 l$ k5 F: R& h, N( o# R4 ~: B5 P4 F$ b
</select>
" ^. G' l9 Z$ }7 O) T* D# K <br>" i2 I0 y# m6 L$ w0 i. p. o* n
<input type="button" value="disable">
& H0 Y) g: h- S% X1 ^/ i <input type="button" value="Able">$ a9 j. d: u$ x
<input type="button" value="getValues">8 d8 B. L5 p- W: l* C
<input type="button" value="editValues">
! I9 J6 B0 f' A2 S; U <input type="button" value="addValues">( B6 | ]) W! x6 R$ J2 z3 w3 A
<input type="button" value="removeValues">1 R) J7 b% }' y
<br>" t7 i: F& Y6 ~- P N% Z4 v
5 ^' c' o. G' n: z& ]
</form>
, k0 F/ M2 }9 r# }) E0 D! l+ y; t2 e% z3 s4 Q8 V
<p id="demoInput"></p>
% V8 _& P9 B4 W& a
0 w8 j! ^" A% t+ J" @3 h* w
& L0 a r9 n2 |& W3 e6 v7 P <script>: W) X+ e$ \; g8 A/ p
function disableFunc() {
7 V- c8 M- y. e9 V7 R1 @4 { document.getElementById('mySelect').disabled = true+ |( M" k1 [% M& ]6 Z2 v+ P
}
3 K4 L/ p1 M5 r: d. k: \ function ableFunc() {
; g' f7 u3 l. q1 y, R9 y document.getElementById('mySelect').disabled = false
" A8 d" v' o3 Z, T; H. F! q- G+ U }! i; |: M F- n* E7 m' {
function getValues() {
' C0 E# s; B7 G7 d1 \( a# n4 S var text = '<ul>' h9 b c" Y8 `- d. f# ]
var x = document.getElementById('mySelect')
, t& p6 R, F5 _7 `" C0 m- D for (var i = 0; i < x.length; i++) {
4 f, u& X8 x s& |9 n text += '<li>' + x.text + '</li>'
5 ~3 Z% ]6 ] c9 R) }" @4 h+ V }' w; g. e5 R0 P+ E
text += '</ul>'( d4 u9 @2 W7 g) V% w! Z
document.getElementById('demoInput').innerHTML = text
1 D% @3 {9 |4 y+ a$ v6 `# E" ] }
" P9 H s9 X( U) v
* m$ a$ ^7 q3 ~1 O$ j/ O! _ function editValue() {4 ~! y/ w* A. J" O+ Y
var mySelected = document.getElementById('mySelect')
5 W+ n( V/ ?) S: D3 K) I: ]/ A var selectedIndex = mySelected.selectedIndex* f/ x% K1 f9 k
mySelected[selectedIndex].text = document.getElementById('inputChange').value1 G- Q/ y7 m0 R! q/ ]5 n4 N1 H
}4 ]/ v- O; s8 E5 d, K3 E5 |7 i
, k* V% g6 ]5 l7 @7 ?6 L
function removeValue() {
1 g! J2 H( t& j+ B: J var myselect = document.getElementById('mySelect')
1 {3 M. h1 Z0 @% {6 ?8 U var selectedIndex = myselect.selectedIndex( L* H: D/ h' \( N" G; O/ h
myselect.remove(selectedIndex)5 j7 S! y6 f/ E3 l2 ^) E+ \
}
' t9 r9 Z8 @9 u" r* B8 P: Z function addValue() {6 f9 s; |) t7 U
var myselect = document.getElementById('mySelect')8 H& i5 C8 B$ w) c% z
var addvalue = document.getElementById('inputChange').value) w/ ~, s& |1 r- t- ?3 }
myselect.options.add(new Option(addvalue,"value"))9 l, k& \1 Z8 V! i* D$ w/ E+ y
}1 u8 x& `7 R" @7 ]: c L2 l
</script>
$ d5 T( L* M7 Z6 M</body>
# z# h8 b' D9 l; c" a# L( n
* r. O8 v8 y+ Z3 L</html>[/mw_shl_code]1 M1 Q1 o* v* k4 `; y0 l4 \! c W
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
