|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
% U* |: L& }$ S: |
$ @# Y7 M3 S- TJS 操作 Select相关功能测试
' c3 H: m$ L) p3 h- Z& c c7 [9 G: l: |; I
[mw_shl_code=html,true]<html lang="en">% h8 W# a/ P4 y( Z. w: B7 t ?& |2 u
7 U" l) z( c$ N! a
<head>) C: e5 h w$ ^/ r$ l
<meta charset="UTF-8">
n3 r4 A" J. K2 D$ e <meta name="viewport" content="width=device-width, initial-scale=1.0">
( I2 {% ?' Z; T% _1 C <meta http-equiv="X-UA-Compatible" content="ie=edge">
# g7 f# {, W/ s; W4 P <title>Document</title>9 g$ {% H& @: _: t5 o" J; l
<style>
" i/ x5 v) L; C a9 V6 @ * {
* u- C# N' T+ M1 T3 i2 p/ o0 Y9 s4 H font-size: 10px;$ E3 j# L$ n7 e& _( v5 x* a8 a
line-height: 24px;
% I) v0 g- Y* P/ g- U* v. z }! a/ O# K. s# r- q( E, T
</style>
, B0 W3 K- @- d% B</head>
+ S" P, y' ^# L# q' f6 _& y- ~ M: X6 x: a0 Q
<body>4 f9 Q& k1 d) D7 Q5 ?1 u+ H
//this is for the select test) t" O% {5 ?# c0 d
<form id='myForm' action="submit" method="GET">! L0 D9 |0 }% e0 M5 g9 t0 m/ _
<input type="text" id="inpuTChange" />
2 W; Y: j: Y& S1 Z! d- X <select name="selectFruits" id="mySelect">8 {' l$ l" H' w& R( U
<option value="Orange1">Orange</option>
: E* K5 K# |9 {# S# b/ ?7 ?$ p <option value="Apple2">Apple</option>6 g2 I* J3 p/ h" z# ~& Q: P
<option value="Banana3">Banana</option>! R4 o1 V) O. a+ n
</select>
& c/ u0 p/ [3 p# J, J9 ~9 G. ~ <br>
- V) ?' D/ l7 P* p& a8 o0 d <input type="button" value="disable">
0 i/ [$ X( B2 m$ d' u) o; Y <input type="button" value="Able">
! K _* }6 l6 t* j <input type="button" value="getValues">8 E+ |, k% l/ F. X) U! i
<input type="button" value="editValues">
, M) |) s& k( [) e <input type="button" value="addValues">1 e: o/ J$ k% d# m# ]& f8 {' b
<input type="button" value="removeValues">+ y6 o+ q$ R0 t, x: J/ c
<br>! \; e+ U0 m+ O; a+ r: n) C
4 g' M9 q1 ]) A' v5 C8 N
</form>0 @" ~& S' t" g7 W0 j
7 q) l, |- ~) B+ { R4 }8 j <p id="demoInput"></p>+ Y2 ?3 ]; y9 V
: ?9 f$ P* c! C( ~
7 J% p2 L S. K+ f# m7 w( j0 x7 L <script>
3 C+ h0 M8 R! n D I function disableFunc() {
4 `- V x/ x3 q0 A& ~5 i* u/ j$ ~; g+ C: n document.getElementById('mySelect').disabled = true
x+ J: n) U" U% @* \ }; Y1 X( g% R9 U
function ableFunc() {9 Z3 E# ]+ j1 ]* }- e5 M/ k9 y0 v* Y$ x
document.getElementById('mySelect').disabled = false0 O: c" r: J/ T/ }! y# b/ p
}
. x# H+ D4 g, Q1 c% H4 h function getValues() {- L8 b* P H! ~2 H! ]/ A
var text = '<ul>'
. i% x: {$ m$ a1 O) u var x = document.getElementById('mySelect'): D$ L, G4 G# \: r3 v
for (var i = 0; i < x.length; i++) {
+ |) A6 ~, I( K! A" b text += '<li>' + x.text + '</li>'
; w5 U0 s& v: f) F; } }1 A1 E6 F& o& S: e# F
text += '</ul>'/ i* [ e3 w/ v6 ?; H
document.getElementById('demoInput').innerHTML = text& [) G; _# K7 z- h3 Z
}
5 F" B Z1 G. ?3 d
/ O) E3 Q9 I% d e8 n function editValue() {
3 L- ?, K( r% r& u9 p( b% q var mySelected = document.getElementById('mySelect')
1 f$ @; p/ k; A# i var selectedIndex = mySelected.selectedIndex% F& \2 G/ F f/ i
mySelected[selectedIndex].text = document.getElementById('inputChange').value
* V' o0 l/ B9 D9 |- ^9 r" L" |+ O }& ]: }8 E( R* q" E" O
+ P2 M" j" c$ e4 Z% f
function removeValue() {( u y+ K7 N9 J1 G# V7 X9 p% p
var myselect = document.getElementById('mySelect')0 c2 w, @( z6 \. c$ h
var selectedIndex = myselect.selectedIndex
( h5 o8 X& R: `/ x1 p% Y myselect.remove(selectedIndex)
/ N! k8 |2 t4 r4 b }2 l$ g" O* i7 O8 O
function addValue() {
. {2 w# }( m6 |6 g: P- H1 h4 p var myselect = document.getElementById('mySelect')
4 N+ q9 Y4 i6 n: B( u, K var addvalue = document.getElementById('inputChange').value4 T4 S6 v' V" h. d$ d; x
myselect.options.add(new Option(addvalue,"value"))! y/ ~0 ?* L+ W# \
}
) l" ~% M1 u" f4 ^% i `# a </script>
' r/ ?/ X9 s z7 ]" R</body>
/ Q) O @; r: Y
2 X. D5 B% J4 K) D+ _( h</html>[/mw_shl_code]; ]$ o0 G# o7 J+ a
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
