|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
6 U) u! T' A" h( q
' |4 p S8 y/ J4 x( D
JS 操作 Select相关功能测试! J6 b' l6 `1 u* {
$ X! V- e8 F! ]9 W5 V- V. t
[mw_shl_code=html,true]<html lang="en">3 P8 t/ ?) ]$ O% o' F
" `, Y; y' b& z6 L
<head>
- R1 b1 D/ k4 ^& `1 X1 k r <meta charset="UTF-8">8 Z! ~5 g; K8 u3 w B
<meta name="viewport" content="width=device-width, initial-scale=1.0">6 `- T6 t9 T- y; }/ t# v3 g) a* d% R
<meta http-equiv="X-UA-Compatible" content="ie=edge">
/ D5 v6 n& u/ }" v/ Z" P( Y <title>Document</title>5 s8 W0 E7 [/ E9 ?) {; w- z
<style>
9 n* Z" G9 ?& ?1 G( o * {1 b: U8 V/ H1 q$ R% Z$ i
font-size: 10px;9 y9 e2 f j, u$ D; t
line-height: 24px;
6 p7 b! T4 ]: C# x3 \; F }
; q% W0 Y0 a& c# U9 v) x& g </style>- A* |& @8 J9 D2 R) T
</head>3 g" D+ T8 b6 m8 p0 q Y
2 @6 L g1 Z$ H7 ]8 G _<body>( Y8 g5 _0 q* j3 T5 M' a/ f$ X
//this is for the select test# Z! f' K6 m6 |: U
<form id='myForm' action="submit" method="GET">5 ~& M4 q/ `/ }: Q0 Z5 f
<input type="text" id="inpuTChange" />2 l. C+ I! p0 f8 _7 G, K
<select name="selectFruits" id="mySelect">, L! _4 y* u) u" j9 e5 s
<option value="Orange1">Orange</option>
" z9 Y3 u' H- k: s3 s4 X: C4 _4 t <option value="Apple2">Apple</option>
, U! \. N. P) d! `4 Q <option value="Banana3">Banana</option>7 D% s8 o/ P. A m3 P
</select>
8 o" F0 o# p, a <br>) {$ C8 j- V+ I; P% k9 I# t
<input type="button" value="disable">
: c! M6 \" u: @7 w/ _ <input type="button" value="Able">
! J" C/ i$ T9 c* Y L3 Y" Y <input type="button" value="getValues">* _# [! [1 c! }% [2 W- Z: Z7 a$ U
<input type="button" value="editValues">0 M3 s. u5 h' J/ I" s1 @
<input type="button" value="addValues">2 X" l6 X, Q G) B$ y( d
<input type="button" value="removeValues">
) ]" d0 c8 o5 K. W# q4 f0 P; Z: y <br>
0 \% \1 K l6 ~4 ^9 k1 t
- @, ~1 ]. k3 e# X" f </form>
7 L+ H( x% y1 H% r1 b7 x' L6 ~8 f: B. [# T: X' v
<p id="demoInput"></p>
% t8 D; @5 c, p2 w. P2 v1 F
5 i) k4 m1 T# ~) H+ C9 S
/ r% V* m0 e/ K- @4 c <script>
4 k# N8 ?0 K8 O: K/ B& k function disableFunc() {/ @0 p# r: F3 p: v
document.getElementById('mySelect').disabled = true0 x( v$ L# C R4 T2 Y4 l" ?/ g3 t
}' m4 j& d9 Y% V
function ableFunc() {' i1 B9 T3 v. \# G
document.getElementById('mySelect').disabled = false) Y2 _! [, C* D2 ^; {4 C8 M/ {
}% A" }& d Y* M+ j& V1 x+ E( Z
function getValues() {
! @2 W! @) Z* X- M var text = '<ul>'
/ r( T/ {9 L6 {! j var x = document.getElementById('mySelect')
7 a* z" @) g; ^3 Y% r* J for (var i = 0; i < x.length; i++) {
8 S) Q; @! @3 u0 m% x/ \ text += '<li>' + x.text + '</li>'
6 A, k- ]+ i) j- H5 E7 O }1 M/ a3 i, H$ j. w: g) I
text += '</ul>'
0 u' I+ o' f G+ F D. ] T' i document.getElementById('demoInput').innerHTML = text' W# n& n) V/ K( j
} W5 U0 u3 P, p" s- J T
i2 T/ T4 u3 m) F, n& ^3 m& e3 A4 ?
function editValue() {
6 c9 E' R3 l. h c9 T var mySelected = document.getElementById('mySelect')
0 }* A- y. ~9 ~1 A; x var selectedIndex = mySelected.selectedIndex4 x! k% U- ~7 k' m' T
mySelected[selectedIndex].text = document.getElementById('inputChange').value
5 N0 u0 M* b9 k1 ^7 v' Q }
3 m& x) }. `1 b4 d7 I% Z& |6 E" g m( \5 T* r4 J3 R
function removeValue() {( J. G0 T' d7 S
var myselect = document.getElementById('mySelect')
" L$ n, l+ `$ ]+ t. u! y var selectedIndex = myselect.selectedIndex
{8 z6 t1 Q( o9 m" Y" u- I myselect.remove(selectedIndex)
. N9 f9 [ c6 k, t7 y }! Y- P/ |. p1 Q1 \1 n5 Y5 U
function addValue() {/ `! W) S: L6 {! T. ~9 J/ _# J2 ]3 F
var myselect = document.getElementById('mySelect')
* `1 u. e3 y& Z6 P3 R3 K$ m var addvalue = document.getElementById('inputChange').value
$ g) U% [5 D0 ^ myselect.options.add(new Option(addvalue,"value")). ^: G1 B, ~# S9 \2 |3 X
}
# W4 W3 L7 E+ M' M </script>$ X6 K& K w1 n3 G0 Y1 V/ s
</body>4 V+ O G. n$ y F; X
) _! T% n8 ]4 L- u
</html>[/mw_shl_code]
1 h% g, M9 h3 q. _ |
|
|小黑屋|手机版|PLM之家-企业数字化转型工业软件学习平台
