|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
# Y. C+ q, U# S! Y- J8 s) o8 ]8 ~
" S/ r1 @/ g3 A5 b8 ^% BJS 操作 Select相关功能测试
: n" u: a( m' ^7 E3 {/ e2 T" \# x& @
[mw_shl_code=html,true]<html lang="en">, F; ?4 h6 R1 {- m4 M
/ r1 I( R, z8 `! r<head>4 E/ W b0 k8 ^
<meta charset="UTF-8">
( L9 V& y; j8 l2 { <meta name="viewport" content="width=device-width, initial-scale=1.0">* F I! D+ c9 g1 Q% u, Z
<meta http-equiv="X-UA-Compatible" content="ie=edge">- p! f2 H; s1 W ]5 B+ K2 T5 M
<title>Document</title>
. d, ]$ |7 R4 J$ x <style>
# T* N# V3 t3 u2 [8 W( n$ _/ ` * {
. e* ]& y7 k4 _: B. z" ?, R+ b font-size: 10px;" `7 D8 S4 B/ w: m; Z# w
line-height: 24px;
+ `4 \! |% C0 G2 } }3 o0 y1 S( D) I: C" w5 o2 \4 l
</style>
) f* Q( O: ~5 e- k. u/ }</head>3 [" d8 w% D1 ^5 ~8 s8 M( s1 Z
/ T2 T) @) A( Y! F- Y2 f
<body>% v; N) W" w8 M; M5 F+ Y
//this is for the select test
- {7 V0 x, [6 n; U0 Y8 f <form id='myForm' action="submit" method="GET">
) \* j; a+ f D6 j! t <input type="text" id="inpuTChange" />
1 ~4 c9 x# f0 k% E/ ~- x \ j+ ^# e <select name="selectFruits" id="mySelect">
# I& u, d E/ Y! M) C <option value="Orange1">Orange</option>
: a" {8 u6 m6 o, @6 c; r5 w* E <option value="Apple2">Apple</option>6 {: P% U* E# P! O3 v! l2 |
<option value="Banana3">Banana</option>) c6 a& X' r, H g: c
</select>
. U6 [# V/ d2 T- i( w; J' F <br> A6 f/ J& M- l h# K
<input type="button" value="disable">! N/ A0 w. M3 ^$ Q% s$ A) w/ S
<input type="button" value="Able">
# v4 `% C2 u9 O( D <input type="button" value="getValues">
, p/ J. Y' O7 j( F- m <input type="button" value="editValues">
6 n5 u2 L4 a& e/ t, f! | <input type="button" value="addValues">
3 r! l* X; ], b: n' B2 C <input type="button" value="removeValues">
- V+ F: V1 o3 H5 B <br>" k/ i4 J; A9 N* N
! S. Q- r( G0 R3 z9 Q6 _: ~ </form>
( p5 q' ]. m9 A# J) T k, x/ e. s3 p# r& R+ g& p# e
<p id="demoInput"></p>- G0 g8 h$ M& _" T( N$ }9 A2 A% f6 k
0 Z% S" j4 K, C7 K+ h* \6 S
5 K5 C5 V, m: _% ?: [ <script>: L. D. h3 r h6 }5 M8 Z' }
function disableFunc() {
$ ` p5 m+ h" o document.getElementById('mySelect').disabled = true
$ O% Q# \ z v1 p& Q# ] C }; G1 i' R \( \5 A* u
function ableFunc() {
U5 F. N. h$ M3 F/ j8 h6 c document.getElementById('mySelect').disabled = false
$ x6 I, e- b5 j8 _. f }( \" l' N" w* Q
function getValues() {( u Y- t/ I* v- [0 i H
var text = '<ul>'
4 p n/ z, R2 N' K9 y( q7 l var x = document.getElementById('mySelect')
4 W9 U$ J" ?! U6 @$ F& O for (var i = 0; i < x.length; i++) {
& X% V8 |9 ^' J( ~) t text += '<li>' + x.text + '</li>'
3 N' }" ]3 m: ^( B! U: e }
4 r" O0 x5 n5 N# F% B% W text += '</ul>'& P/ L3 a& z$ a- m8 V* F& |
document.getElementById('demoInput').innerHTML = text
, H5 \& g Z: E3 p& K8 X7 b }
8 b- E$ r4 o& l# C7 q9 }) d, w4 i4 W T
function editValue() {
0 m& r* N6 {4 P/ H8 G6 F var mySelected = document.getElementById('mySelect')
' _3 L) g& N1 s$ E5 f1 @ var selectedIndex = mySelected.selectedIndex
0 J! _5 _$ b: [6 n. F mySelected[selectedIndex].text = document.getElementById('inputChange').value
! \% q" q3 e5 Y3 u }
/ t4 c, q1 E5 Z3 U6 H8 D4 _/ P0 P, L- L4 I& I* i8 H( h j! I( o7 S
function removeValue() {
# E+ v( t( w' [9 e5 I; [% I6 [3 Y var myselect = document.getElementById('mySelect')( G* r+ J) E" ?) V+ G
var selectedIndex = myselect.selectedIndex; G a$ c9 F" k# g
myselect.remove(selectedIndex)1 \3 _# H' y- a+ V
}8 [- F" c y6 g2 b' K
function addValue() {
4 S4 N" \. {+ s var myselect = document.getElementById('mySelect') O4 f2 O" S& ~- |3 \: N+ N
var addvalue = document.getElementById('inputChange').value
9 p3 Z3 n4 V7 S0 D: ?. j/ Z myselect.options.add(new Option(addvalue,"value"))6 K# F% T/ H H/ x2 s2 Z; V5 J# A
}
( W8 m. o! \% r3 X/ e9 G m </script>$ B; s, V/ i" e( [7 [6 U7 r/ d
</body>
+ ]4 b- `$ u4 c9 ^4 V8 S% m2 H9 f; W: h, t( a$ q
</html>[/mw_shl_code]
' |" A( a+ {/ G1 q |
|