|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
0 d' n8 M/ D s3 C# C. d+ H) l0 i3 w% {7 _; W/ @% n
JS 操作 Select相关功能测试
8 H6 i5 b7 r4 P) H* i! p
- I* k2 J* I# O$ R[mw_shl_code=html,true]<html lang="en">( w* p" Q3 L, T+ o7 e* I E5 A
5 m* a- N# F6 z<head>8 Z1 w' M; _# q3 V4 l0 a
<meta charset="UTF-8">8 C; R: u- M& H$ t! k
<meta name="viewport" content="width=device-width, initial-scale=1.0">/ ~3 \& p5 O2 k3 V
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9 m1 `0 r2 M2 P% a, `; j) n' g <title>Document</title>
% Z2 I1 S% L; m4 d; W/ S8 E9 K8 y <style>
6 r: f* @1 y; z0 w8 h; _6 @ * {
* q5 E* s; V+ k1 Z" @ M1 n) V font-size: 10px;
' b5 ^* C7 `& ~& k' `* c* { line-height: 24px;0 I: Z2 W1 U( l, [
}4 w( L, a, s9 _% p7 O4 o! M, Z
</style>
, u0 E" n% W: C6 S</head>
8 `% j5 t' _* I9 s, z" |- S7 x+ S: l4 q! ]) H; _/ L v
<body>
9 c2 }* C* m: Q6 N3 f. E" R% e //this is for the select test
" ~4 c& O4 q* T) ]" a& X) z8 I <form id='myForm' action="submit" method="GET">7 V! b7 E5 g: o/ ^
<input type="text" id="inpuTChange" />
, q" }4 O( ^2 ^$ Q <select name="selectFruits" id="mySelect">2 v. ]( a1 w: P4 E
<option value="Orange1">Orange</option>
1 K( m, \' y; U <option value="Apple2">Apple</option>
) u- q) S6 a1 q+ ~2 M" a% |2 z <option value="Banana3">Banana</option>
/ R3 a* u) U7 L0 C </select>+ C0 ]* L( K# k
<br>
# n1 {$ p; F. F9 I4 A# J) n8 M <input type="button" value="disable">
* T# r, k* G3 S6 k! o7 q <input type="button" value="Able">& {( }5 \1 y, b+ e
<input type="button" value="getValues">
5 x9 S! \1 z7 t <input type="button" value="editValues">; q" ]! p; Z# c: t; @3 k
<input type="button" value="addValues">6 {1 a" q6 w) e, Y$ ^, s2 ]
<input type="button" value="removeValues">
6 F) C; N" o0 Z& b% D, K' y( m <br>( [9 K& W8 W# d; L" `; c, b
0 x; R1 Q) ~1 {, @5 Q7 c- G9 e( y
</form>
7 [% b9 k% V2 X+ @/ }3 m5 R% G0 C: A, A( \
<p id="demoInput"></p>: K( H4 F! U! P3 o
( ` Y# e2 w+ I& A+ J+ c% ~4 o9 i
<script>
% I1 h. R3 \& K/ J% I' }4 h4 f function disableFunc() {; G! x# N% F& I1 }( b6 S
document.getElementById('mySelect').disabled = true
* V$ U! M6 A: F2 Q% P! t: S& ~ }
8 F( P. P X- j1 M4 `3 t- Z4 B, v function ableFunc() {
. w- F: M# Q1 o document.getElementById('mySelect').disabled = false
4 U5 z3 ?$ D& ]4 S& u }
, ?" }. H9 N7 s& |% J# S! f function getValues() {
& t/ V# E! A) E! R, o var text = '<ul>'
' ?* X6 R6 E+ U var x = document.getElementById('mySelect'); J% a/ }+ |. |! I; j6 f9 M: m; v( a
for (var i = 0; i < x.length; i++) {9 ?/ q! x# i* f1 Y' s4 K* p
text += '<li>' + x.text + '</li>' g% c: B( k; U# ^! m D
}" r4 W. R4 S; C5 K0 u" ]
text += '</ul>'
O) E. `' N% ^5 I ?# {: ~. J, G document.getElementById('demoInput').innerHTML = text) q* h8 b, u; a. o) f/ C9 x6 j# O
}
0 k' ~ E. b7 z# a2 n2 O, D: ~+ e# }4 Q. U
function editValue() {
# D6 `& h2 z2 `5 f var mySelected = document.getElementById('mySelect')
. N) R& q7 Z- j var selectedIndex = mySelected.selectedIndex
/ N6 F9 E N) V r9 D mySelected[selectedIndex].text = document.getElementById('inputChange').value6 y1 d5 q5 F, W9 o* {9 w
}3 H9 {$ J& R5 |- i/ z% m8 z
7 l u! f2 A. k. r4 y function removeValue() {
3 k) O. N* _& H$ J- L! a! Z var myselect = document.getElementById('mySelect')
- b y1 U4 i+ V" r5 W var selectedIndex = myselect.selectedIndex/ e! @9 i8 U+ b( C) f7 e
myselect.remove(selectedIndex)
* B/ s$ x4 F" U0 R9 z; t) s" | }% G" S' }6 @- d! E
function addValue() {
1 r& I5 w& D% G% A" o5 t* S var myselect = document.getElementById('mySelect')
, g6 r: F1 ?" @' B0 E8 W9 ] var addvalue = document.getElementById('inputChange').value
2 T) }2 A( t, _# h5 N$ _ G. c' A8 U myselect.options.add(new Option(addvalue,"value"))
: c5 ^* {" C, z/ [( O6 N$ D }5 c( A) e% g/ q! e( q8 y$ z
</script>
+ \6 X+ y. D! g</body>
9 N( U' e2 U% ~2 D$ |4 ?
+ \- I' i+ p# k* \* f7 |4 o3 Y$ n</html>[/mw_shl_code]( Y3 \. V$ ?- @ N# H8 m7 \( q
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
