|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
; ~6 v& X- @$ K6 q# t0 F. |1 ?
X! @ A$ I# g8 `$ j
JS 操作 Select相关功能测试
, U% E& Q/ c0 m; v5 \, V8 s# k7 s" F7 z
[mw_shl_code=html,true]<html lang="en">- k, C. ~; p, {) m; k0 Q5 S$ L
! ^: Y- u4 Y n( E% ^7 x
<head>* ], R# h% M' Y5 y4 T" f9 `+ g+ s
<meta charset="UTF-8">( T1 u* }& u! Y. h4 S: D
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4 o; o! _# i' P0 R0 ~5 y1 M2 I <meta http-equiv="X-UA-Compatible" content="ie=edge">7 @8 a6 E$ J3 i3 Y' K% r
<title>Document</title>
- J) n/ j) J- h& ^ <style>
6 c t( M; f; v6 t0 p- ]; q * {
7 M, u4 t3 v2 s! U- G& [ font-size: 10px;
4 ^4 P' Z$ Z' w# { line-height: 24px;
( c! R6 B6 q' ~4 G6 ` }
& ?. w6 V" T( Y) l8 e! U </style>. g# |) Y3 u4 Y1 J. q
</head>. u* P0 F, t7 z y) u9 j
* I: J6 H' Q& F9 Q. W1 l<body>- Y7 X2 h, Y9 B% X3 J! S
//this is for the select test
5 S# \4 E* w+ S8 [ e7 x: v <form id='myForm' action="submit" method="GET">
# Y& p9 G1 F1 g+ Q2 m. E0 S* o2 K <input type="text" id="inpuTChange" />! |* A9 g4 B1 `8 `, m+ I! ?8 ?
<select name="selectFruits" id="mySelect">/ c! @% c8 U5 \# U/ ~
<option value="Orange1">Orange</option>- O: v9 N0 A h& r. N
<option value="Apple2">Apple</option>
+ S! l! ~# n* ~% L <option value="Banana3">Banana</option>
) d1 @& j5 i) q0 q W r$ r! Q </select>% H* h- k: P3 h) y: b+ c
<br>, \. R; t n" J' M& `$ f- ~2 e' H
<input type="button" value="disable">
) a, p+ D5 g! d' P) |! }) w4 O' z# z% B <input type="button" value="Able">
4 X8 m2 \( _7 K; \6 } <input type="button" value="getValues">
9 ?' W/ g: P1 x0 X5 @ y0 C6 \& D <input type="button" value="editValues">$ j$ | a A0 N$ x' ]+ A4 K
<input type="button" value="addValues">& g1 N# ?! l$ J) ]5 m
<input type="button" value="removeValues">
, K) R: a9 G5 b; T! e/ E6 K$ R. Y <br>: ~& _; M& `+ O1 w# F" [. L
8 q! P1 g. c0 G3 } </form>
0 L- h0 \# D" L* e( \6 c3 z/ Z" z0 r2 Z) i P& b
<p id="demoInput"></p>
p* O A" ~2 T' g, ?6 k* e0 _3 y0 ^, _; Y# _1 s5 d
* W9 I* U6 f% t
<script>7 i* x- O4 a8 m
function disableFunc() {
: z# n/ ^' N4 ?6 l1 f; C- {2 Q document.getElementById('mySelect').disabled = true
* V/ _% s K- x" P9 h: X w b: @ }
( @( ^* E1 h3 K function ableFunc() {
$ W8 q! W F9 I2 J3 b+ {5 @* b document.getElementById('mySelect').disabled = false: J/ a& k9 P" r) n5 s
}2 O1 J& ]7 v& F3 d6 {( u
function getValues() {( Q% J9 j* J f0 d! z2 M
var text = '<ul>'' b* x! H" _( M- \7 H
var x = document.getElementById('mySelect')) U. m3 @7 _1 ?# b z# j
for (var i = 0; i < x.length; i++) {0 Z* }0 O) O3 v R
text += '<li>' + x.text + '</li>'1 \* {" R# q6 c; f6 l2 G, D$ N0 J9 S
}
! L$ d4 e5 u; O/ l text += '</ul>'
, z l; g) O6 h7 O& P) ~ document.getElementById('demoInput').innerHTML = text4 _3 `2 g* \+ @8 Z, Y
}. G2 |/ x; u* X: J
/ N0 l8 k( F) H- v- E$ z0 I: h" d function editValue() {
/ k, I! @# F$ I, W& o0 b6 [ var mySelected = document.getElementById('mySelect')
, O" E+ X$ ]7 x' `" x var selectedIndex = mySelected.selectedIndex( h* `; X9 v: b" A$ e) n" @% o
mySelected[selectedIndex].text = document.getElementById('inputChange').value
! @& H( l8 w; E }! S$ R, n- _, a/ T1 B* `2 {# ]
7 Z. M' \! b' w, X) S function removeValue() {4 X: i+ G) |( j5 u; m; ?4 C
var myselect = document.getElementById('mySelect')" f6 G; U+ s m/ [
var selectedIndex = myselect.selectedIndex& \* Y2 Q o" D4 D1 E7 E
myselect.remove(selectedIndex)
" K+ i3 d# q# q }( N8 E# x7 z! A; W! w
function addValue() {& z3 ^8 L# }. T* v/ w, j
var myselect = document.getElementById('mySelect')' h% A6 K5 m" `, [6 j
var addvalue = document.getElementById('inputChange').value7 z' e9 J0 R+ x+ W. \: [8 T$ n
myselect.options.add(new Option(addvalue,"value"))5 l% f/ Z3 _/ N& {$ c7 y5 c1 L
}% R$ ?1 W% n M7 J5 p
</script>
3 I$ @7 {& V- S9 k1 K- `7 e</body>& u: @( x6 { k: ^* x! p. e
9 N6 ?0 ^6 t* o</html>[/mw_shl_code]3 t+ U: f. X9 Z
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
