|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
) ~3 C; T) f" z, t3 R
3 i) v: \7 F I8 tJS 操作 Select相关功能测试. W& T7 x5 c. _1 D1 e3 |
4 m( [ N0 u3 q& X6 ]; u R
[mw_shl_code=html,true]<html lang="en">
) l/ n$ k# N1 M. E# @* o" C+ z! E) R
<head>& Y0 @/ R/ h' u$ r
<meta charset="UTF-8">. e& q# I" L5 M# [
<meta name="viewport" content="width=device-width, initial-scale=1.0">
* S2 } E n' z" U <meta http-equiv="X-UA-Compatible" content="ie=edge">
F: w2 H6 p2 H2 Z/ h/ H/ E( H <title>Document</title>: f# y7 n: k& [
<style>
% ~: f6 B+ @. e$ D * {
6 E) ^9 k! L/ Q+ F1 B/ x+ g6 \ font-size: 10px;2 G6 m. B5 ?& a6 b
line-height: 24px;6 c3 C/ o4 P. Q) T( k9 t
}/ W: Y# G! w2 d5 h, s1 `
</style>
1 {. w0 i9 V. Z0 F# V. k</head>
# J9 u" P# V% J) l; J
1 Q$ j& ~$ Z. U; K8 B<body>3 b I% Q& K; a! d& ^
//this is for the select test
& T& a% i: d( \0 s b6 f5 w6 m <form id='myForm' action="submit" method="GET">
8 Z( n }7 F& i. b: U <input type="text" id="inpuTChange" />" R' B2 L: d7 J1 H1 @% T
<select name="selectFruits" id="mySelect">! D, ^; c* |* v9 n; p+ T4 |2 k2 z
<option value="Orange1">Orange</option>! `/ Y; S! \. t0 F1 w9 Y
<option value="Apple2">Apple</option>5 T! W) |. X2 B) c% Q8 m6 g. i
<option value="Banana3">Banana</option>
) d" B! j6 v; J </select>5 Y2 J8 X h6 G5 p
<br>; D2 B' P9 h0 t
<input type="button" value="disable">" N% ^4 Q! {+ ?0 Z6 [
<input type="button" value="Able">
+ B/ L& J6 i. b1 Z. P% Y <input type="button" value="getValues">
9 W/ ~& x0 ]: K6 Z U- E <input type="button" value="editValues">& C& w5 b4 o2 h. u5 A4 t
<input type="button" value="addValues">5 @" ?+ S+ t1 w; `7 T& N- D
<input type="button" value="removeValues">+ t$ D, k" I, g4 b. f. Y
<br>" V. C \/ a( C2 w
3 e8 e/ m# v1 c( S( W& m( L </form>+ B( \- p8 A( j7 H
|. [: x0 Q! n1 P y <p id="demoInput"></p>, C/ k% `. f! x! u9 s( G% D
* O7 T7 p7 x/ w7 x, V
% g6 [3 ^( r* W2 {7 { <script>, E/ b2 B1 y/ v! z
function disableFunc() {& O+ e) g3 A, Y2 P% W0 k0 h* V3 b
document.getElementById('mySelect').disabled = true
! _- a* Y4 x: d$ h1 o' B- D7 w$ m. U }
7 J9 [, ]/ s2 f4 M2 ~! q function ableFunc() {
" m% y7 f/ a3 I4 b( ~3 Q document.getElementById('mySelect').disabled = false$ J0 D1 I; m. x
}3 V% L2 E& u2 j" H' X# k) _
function getValues() {( ^1 ]$ d% m5 ^. d/ t- {+ o
var text = '<ul>'( X2 R' w% ]: t! `
var x = document.getElementById('mySelect')
0 \* }! }; a4 i' N9 M6 {8 K for (var i = 0; i < x.length; i++) {
# X' Y- l( X" z9 i. P A text += '<li>' + x.text + '</li>'
& u1 {( g# _7 e/ c% N }# i. o* c: s6 Y' h* o, Y0 r% u
text += '</ul>'; ~1 |! O6 \2 z7 `) F
document.getElementById('demoInput').innerHTML = text
( k* I0 A# J3 B/ _5 M2 s }
0 S6 W" _: c( a& R
" Y% z& P$ h2 ^2 D1 J function editValue() {
8 A* ~( ^5 h. S var mySelected = document.getElementById('mySelect')
. R, T8 ]$ t% }3 x0 v$ X* ?1 T var selectedIndex = mySelected.selectedIndex
, D" \; o7 D: [# [- A" B% T mySelected[selectedIndex].text = document.getElementById('inputChange').value6 `5 A: J9 z* E, @
}4 u6 B \/ B" w4 O" ]! u2 W* u
! ^- Z; k5 ], @- C9 W1 I& i; g/ A
function removeValue() {
, G- i! k# B* c/ B var myselect = document.getElementById('mySelect')
# U3 p. C$ Z/ j9 `* A! y# X var selectedIndex = myselect.selectedIndex, j9 J2 h' v4 y5 c1 t
myselect.remove(selectedIndex)
8 {3 f! Y; @( j6 j a+ ` }
, d7 q j$ C% A! h, g5 t function addValue() {( g0 m1 M: g# \+ N
var myselect = document.getElementById('mySelect')
1 J7 W4 f! I' L3 l" { var addvalue = document.getElementById('inputChange').value
. A# w/ t4 \/ l. G9 [3 l0 | myselect.options.add(new Option(addvalue,"value"))
( r# I- S2 m+ B- w6 X0 V0 t: s }
3 m/ Z4 I( o2 Q </script>9 ?+ _( h/ a h% ~
</body>0 W' v7 m; f# a G
! O3 `8 t. R1 b- X0 h: M</html>[/mw_shl_code]- T2 D! ?+ W2 O% d! b
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
