|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
- @3 B, |( d w& X- q3 S( f* n6 D$ ~8 y+ {2 |
JS 操作 Select相关功能测试: s' d8 M- V7 \
. }6 x: ?7 F# ?. d( c
[mw_shl_code=html,true]<html lang="en">' O! M( m0 \/ s
. u7 T7 P, e$ d6 L7 s: U, b
<head>+ t% g: f$ N0 @! R8 V
<meta charset="UTF-8">
$ \2 L2 L$ P) I! [* m <meta name="viewport" content="width=device-width, initial-scale=1.0">
. m) H+ i4 T7 T V: `% f <meta http-equiv="X-UA-Compatible" content="ie=edge">0 ~' ?/ ]/ F7 W+ E- s
<title>Document</title>
1 h, M) N. ^) g$ A' a6 x2 o <style>
4 V6 V V; V) F& X7 n * {
+ Q# R$ m5 ~* i' R+ S) [- i$ _ y9 L font-size: 10px;1 P' M; f# F" R \7 x
line-height: 24px;
/ f2 @# w. Y, k4 O8 o' u+ f }
, ~) T$ z7 h$ ~! c! D </style>
9 H1 e; f+ {, W# A" ]5 b5 A; V</head>
5 Q8 |1 L1 o" {0 m1 ~2 Y/ B9 T: v/ C1 m1 T3 ]( ~
<body>4 o9 l8 D X# r- B
//this is for the select test, ~7 X: Y, R+ ]3 ]$ \6 b/ T8 T
<form id='myForm' action="submit" method="GET">
, E* r+ j2 g% j4 q <input type="text" id="inpuTChange" />
* t2 `+ r, `& c( `6 R9 M. Q* P <select name="selectFruits" id="mySelect">
, O4 X9 W. D, m% M8 e <option value="Orange1">Orange</option>
8 L, F/ K m6 Z4 ~ f8 i5 ^ <option value="Apple2">Apple</option>
/ T: `; }; Z+ S& g5 L, K <option value="Banana3">Banana</option>
- d5 c& E9 y6 K0 i5 k# {* ? </select>- b/ C, J" D3 _: J% {0 C6 G
<br>
6 [' j, Y( B2 W ?( S. H* ^ <input type="button" value="disable">2 Q) d V4 P @1 f% ?
<input type="button" value="Able">4 n" ^; B! }( T5 D
<input type="button" value="getValues">
5 s8 U4 u& L. k+ u" H/ j <input type="button" value="editValues">
# [- W- u: s( z5 r <input type="button" value="addValues">3 c! X1 x* H* P4 R
<input type="button" value="removeValues">
8 t# L5 I$ b4 f* q S; s, l# ^ <br>9 i2 t* m. _0 X
+ s x# v# Q& p% t: V3 f7 L0 R
</form>
0 |0 z3 z; N$ T' C7 [0 ^( k% Q4 x8 d% O0 x
<p id="demoInput"></p>
7 X5 q; ]0 _$ i( a: R$ [; Z8 J! Z; L
7 J! O) Z6 G! Y: w/ k4 H7 p$ n2 F
<script>
7 M- x8 u5 ^* J0 ?2 z; | function disableFunc() {0 l: P$ T4 d( D% n1 j- V9 I
document.getElementById('mySelect').disabled = true
; ~# J- H/ W' R }
# H e8 A3 r- x6 G6 K+ | function ableFunc() {
0 d, @% N& A" [4 | document.getElementById('mySelect').disabled = false: M7 ` e4 f9 f: \2 M
}% I, C8 a. t$ @2 A# o
function getValues() {' W+ c3 ^0 A0 n
var text = '<ul>'2 N) c) O) ?* s; j# H# o |
var x = document.getElementById('mySelect')9 M* \* F: N0 ^5 I4 @% \0 W
for (var i = 0; i < x.length; i++) {
3 f; M, }7 S2 U. t# ] text += '<li>' + x.text + '</li>'# H' g8 T1 g2 S3 R# j, `0 ?6 H
}
0 Y1 S$ K- c5 t0 _* b0 _ text += '</ul>'# \0 p- P) K: u$ y& X
document.getElementById('demoInput').innerHTML = text
4 U' ?) L8 z& V$ i }
2 J# U4 m7 g0 ~! Z2 f1 ]7 e
0 `- E7 B7 }# p function editValue() {: R! T7 y& x1 I$ ^+ Z
var mySelected = document.getElementById('mySelect')
, t" |3 X6 A, [- V9 U! C1 A var selectedIndex = mySelected.selectedIndex
; L+ Y; O- w/ N' c% H mySelected[selectedIndex].text = document.getElementById('inputChange').value
: O4 B: C$ V8 x. ^. c G/ t }
' w6 a, e( }" @) l/ r J
4 J0 g1 m( S% o' h3 Z) P function removeValue() {
2 s# z& F+ u7 M# P& S" X, G2 `# _ var myselect = document.getElementById('mySelect')
' G+ R$ o; Z6 z8 | t0 w4 K) q$ x var selectedIndex = myselect.selectedIndex" L1 k/ q3 {& T+ s9 I
myselect.remove(selectedIndex)
6 J$ `" l, K1 r- C& x k }5 `* T$ f% r( _9 }% \( v3 C
function addValue() {! W, i! K' T& f
var myselect = document.getElementById('mySelect') [3 I+ [6 u8 |1 H# V A
var addvalue = document.getElementById('inputChange').value+ y$ R& Z, s8 j8 h7 A
myselect.options.add(new Option(addvalue,"value"))- o8 e0 j) e; S7 a
}% C& t7 [: h) ?5 [9 s3 [; D
</script># S1 c; }- k6 O
</body>8 O }# t" s/ c/ `. x% a
% N+ b5 o8 } z
</html>[/mw_shl_code]* u" d8 w% v- a
|
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
