|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
: }" H: r5 ?& ^; T6 P+ M/ ?
% N8 F A: L9 W/ D# c
JS 操作 Select相关功能测试
/ s( U% g& N! f1 i& T$ `. T# N8 j/ r/ g% q
[mw_shl_code=html,true]<html lang="en">3 c+ G4 W6 i& r) r
6 [5 p' [# }1 g# _<head>" E* L# j8 M8 s8 U; {
<meta charset="UTF-8">. F" p. M: P9 M7 W
<meta name="viewport" content="width=device-width, initial-scale=1.0">
" ~0 ^ |" E1 q5 X4 p <meta http-equiv="X-UA-Compatible" content="ie=edge">
0 P. j# Y, m7 y2 j% A <title>Document</title>
! M0 y/ L& _5 ^$ h; z <style> T, L( [/ M8 C: Y5 f* E4 F3 e
* {
& e" y: Y0 n% X. v* ` font-size: 10px;
3 L+ t/ ^% |, Q3 E e line-height: 24px;
/ f: @! V$ ^+ ? }7 Q+ e! @! e8 U0 ]. Q* X7 | f
</style>
# G) }* P" c2 ^' s</head>
2 F: s" m+ Y+ c4 j7 z2 @) B m3 ^6 B, X- h* c9 D& T5 k9 K- ^' Y
<body> v8 p+ s. u$ [+ A, @
//this is for the select test2 K3 X9 t( Q0 h4 z
<form id='myForm' action="submit" method="GET">
( @* p9 q6 G* u2 {. o, h m; ^0 B$ ^ <input type="text" id="inpuTChange" />
' Q7 M9 e* g9 R4 f- W4 H <select name="selectFruits" id="mySelect">
; S+ e( o% ^- ~/ m& B <option value="Orange1">Orange</option>" K. u! K7 e: L# q
<option value="Apple2">Apple</option>) X. |8 |0 T+ \6 k/ k
<option value="Banana3">Banana</option>% U: `+ q, p- M7 u# g2 [
</select>
1 ]+ a* F& j! ^2 k6 x! V! H <br>0 T M* Z8 f/ n% A$ B3 Q. x
<input type="button" value="disable">
9 A ~/ }* E1 i7 ] t- ` <input type="button" value="Able">
3 Z1 {; V8 g- n/ y' v# V5 i8 ^ <input type="button" value="getValues">" X; f+ Z+ N2 S/ m9 F$ V) {0 o# k
<input type="button" value="editValues">% Q+ K D8 b0 H) J( Q
<input type="button" value="addValues">% m! H; a. ~+ H9 _! s; p* K
<input type="button" value="removeValues">8 }- [- W- d8 [: g) ~6 A* |
<br>+ G# i- ^6 y, J) p N+ S
: L1 @1 `3 u! {+ |' [; p4 q' ^" Y, N: O </form>
/ X. m' C" l3 R/ j0 p% q; |
2 \3 c4 C; y# u" F3 J! D6 _' h <p id="demoInput"></p>( r) F2 t2 g* V& B% }: w# {& B
r. [2 Y/ [/ _' @ G3 i
9 t& Y5 N* d6 ?1 F <script>
, K; _. ~- ]+ S$ O# G( t function disableFunc() {
- e1 H, y$ q$ Z1 i, r; C document.getElementById('mySelect').disabled = true' D2 M2 t: N' P& v$ d( u# c$ U
}
% c, k5 l/ @; Y1 Q0 | function ableFunc() {
2 g% P- j4 T H3 l3 f4 [: f document.getElementById('mySelect').disabled = false
' r4 D% \( q% U. p- v) R: m5 e }1 e8 W3 ]) _8 b: E
function getValues() {
/ I+ N+ x2 s+ R) p1 B& d3 C var text = '<ul>'( Q( P V. @2 C' _ Q
var x = document.getElementById('mySelect')
$ o" o* t( \, J6 Y! V% ] for (var i = 0; i < x.length; i++) {; i: X$ D+ o9 ~0 Q% }7 }
text += '<li>' + x.text + '</li>'
) r0 `' H0 H) Y$ ? }
4 t1 p. B& r( r+ ^- i- u text += '</ul>'
$ l& P) J3 D% h8 z7 m; N document.getElementById('demoInput').innerHTML = text4 h2 |, H" O7 |# u- ?2 w2 v
}
3 y5 x p0 Q9 z1 Z: ]8 d- w# I
/ z! N# U. D. n/ x6 y8 Z function editValue() {/ ~$ V% v$ V2 Z# N6 b2 r0 h: x1 z
var mySelected = document.getElementById('mySelect')0 b3 z7 i$ d9 z! M2 n
var selectedIndex = mySelected.selectedIndex6 t$ o: S5 k6 ]* Q: ^3 U
mySelected[selectedIndex].text = document.getElementById('inputChange').value
: @/ E; m+ v4 N; ` }
5 ~( p3 Z7 M) d! z' P7 |
6 J; c- o8 E3 ]2 \5 g) Q, f function removeValue() {
$ i% D3 A$ q% S) c3 G* ~ var myselect = document.getElementById('mySelect')
) L& F* _! i' @: }1 E5 h8 m3 t( g var selectedIndex = myselect.selectedIndex
0 ^/ z% B9 K$ L$ x- U7 j, W myselect.remove(selectedIndex)- e) X/ F" o+ ^' f1 a% Z
}/ N6 C. @+ ~- A4 r
function addValue() {+ C" B: K6 M8 y, X
var myselect = document.getElementById('mySelect')+ I8 I' _& r4 d; I8 H$ k7 B
var addvalue = document.getElementById('inputChange').value z# M1 Y) F( Y
myselect.options.add(new Option(addvalue,"value"))
2 F8 a3 Y8 j8 H3 W* ~ }! ^6 V; C# U/ h) z h
</script>& o Q3 D! n% M4 B1 Z
</body>' m i( @6 S+ H5 P9 i4 Z' O
" h0 S9 C$ V' i* N8 }</html>[/mw_shl_code]& i+ j# f9 } Q& w* S. D/ w
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
