|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) k+ f$ m _" k$ e) ?' k9 ]/ ~& x; ^
# e; r7 W& g0 Q4 Z4 SJS 操作 Select相关功能测试6 \2 P h, |' Z+ s1 f
u) N' {+ ~% V. O[mw_shl_code=html,true]<html lang="en">+ W$ P* C: W! H4 }2 V6 h+ G
( u Q+ N0 C2 p; `* A
<head>5 }+ l* f2 [: j' w. @3 S% S) r- Y+ S
<meta charset="UTF-8">4 l$ K+ H# M1 o! L8 @4 a6 [
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3 S: b: Q. t' S, U5 x2 k1 e! @! ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
9 t6 r! i' W9 B <title>Document</title>9 P. ^- ^0 P2 D9 ]8 v" P
<style>7 ]! B; L8 B& t2 K3 n3 H* Y
* {
/ Z' X/ H1 O! [. D; i6 F font-size: 10px;; B) G* z) v+ |0 H, j J3 f
line-height: 24px;) o! |# i$ ^+ a: E. A; B
}: I$ R# J# j z9 {, D5 J' E: R
</style>2 j% q$ d n3 [0 `! d, v
</head>
) B5 }3 u" n2 c* J2 T9 J. e+ [' F" I) `
<body>: R V; i* J5 _. Z' s5 V
//this is for the select test' h, U9 }* [( J9 l1 \, S- U# Q
<form id='myForm' action="submit" method="GET">
- Q9 U* O* Q5 l: b <input type="text" id="inpuTChange" />
1 r; O" {6 `# W, E3 G @% T, l <select name="selectFruits" id="mySelect">' }" w2 J. w% v/ s. @% @0 B
<option value="Orange1">Orange</option>. [; L3 x/ }" M6 d% s4 h+ y" c
<option value="Apple2">Apple</option>6 y4 a9 w% t1 S' m$ c5 X2 ?6 ?
<option value="Banana3">Banana</option>
; G, {3 l) s0 ?& T7 D- I </select>
/ Y- S* h# o2 a( @6 ]* t" _ <br>
( A0 l" t( I C7 T <input type="button" value="disable">1 J- q0 b! Y+ S' z: L! J. T, t& N
<input type="button" value="Able">" T. p% x/ i/ t0 w+ U6 o
<input type="button" value="getValues">
: S* @- V4 q( I" W; @% @4 P <input type="button" value="editValues">
8 v! k; i) [6 X+ x2 e6 A: V <input type="button" value="addValues">
2 M" U( P( A% V9 {1 N+ g2 V- W6 ? <input type="button" value="removeValues">8 w5 _8 Z2 D" s
<br>
3 `% G5 N9 L) D% E
: h; {7 f- O- R5 m+ I; N </form>- G1 j) G- h5 I- {8 d
9 S. L2 u8 A* R" w! D# l <p id="demoInput"></p>
6 x$ | K' G. Y; A* r/ @& h. t- ?! f7 d& S- S
9 Y% ^* C/ S4 b1 j7 \* B c7 @
<script>
2 ^' v |7 T/ J. N- n# e function disableFunc() {
( q, @% p! e+ c, y2 v document.getElementById('mySelect').disabled = true
, [- b( w9 G# m* K( b }
7 p+ P9 D* U+ d L( T4 G* _& b* H function ableFunc() {
. U3 G, R7 E0 k, O8 [, @+ { document.getElementById('mySelect').disabled = false
% X9 b; @1 m" E" b }7 z8 \* c7 f! n5 q4 v7 {& r$ W6 `
function getValues() {
v% b- F3 p- a% ^4 t7 W/ w var text = '<ul>'. M5 f. a2 E+ t- w1 B$ b2 u
var x = document.getElementById('mySelect')
& E& K. W" D$ E( ?: `) U for (var i = 0; i < x.length; i++) {, h! x2 P0 `8 Y: x! C
text += '<li>' + x.text + '</li>'
( n0 d6 s8 Q$ y/ p! J/ d }7 Y! z- T! u+ w2 [- K2 S9 ?3 }+ e
text += '</ul>'. V2 ^5 O3 v/ U9 P* S
document.getElementById('demoInput').innerHTML = text {& @/ J: j( o* Z; _. i
}
3 m# y* i1 e& r9 B: w, b& f
! { A* _2 S0 B( B function editValue() {
$ i% E2 J+ T" O v6 j9 c( ?* W var mySelected = document.getElementById('mySelect')* x& P& U* e3 i0 }3 P( l' P
var selectedIndex = mySelected.selectedIndex
! r; z# H% ]2 b mySelected[selectedIndex].text = document.getElementById('inputChange').value
O$ P7 F; j5 Y3 P4 N }
) B/ B4 n+ {9 @+ _9 a3 E' T8 P
% Z' p, z2 S9 d function removeValue() {, d4 M4 k5 B9 U' N6 O3 b: ?
var myselect = document.getElementById('mySelect')
" u+ a ]5 g; j' r% f var selectedIndex = myselect.selectedIndex
" `: ]7 F. `% j6 Y' d) ^3 u myselect.remove(selectedIndex)( H# C2 @* P: H
}, h/ T% H/ M( f% N) J$ i
function addValue() {0 [$ b. F E# z' T- S
var myselect = document.getElementById('mySelect')
4 w& g! T, U5 @ var addvalue = document.getElementById('inputChange').value! { g8 q. F* q2 U
myselect.options.add(new Option(addvalue,"value"))6 a8 q( d' r5 x% a: h. f
}
8 a5 b; x7 @" ~' I2 g9 v </script>5 X3 H( ]- z3 l0 s" l
</body>
& D2 g4 M# L) q- i4 ^( C0 G
# V7 i( A+ w9 |' E5 \% T</html>[/mw_shl_code]& {/ Q1 k. q9 [+ _/ r
|
|