|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
& Y' A9 r. U" F8 R: y( g, i+ g* B& B; K
JS 操作 Select相关功能测试
6 V$ e+ o) B' K7 T1 |: G3 {- t. ?% u& |8 ?+ Y( m" R2 @' a
[mw_shl_code=html,true]<html lang="en">
$ I4 i. _* }0 J& s3 z4 j+ M* K; h" T# p9 k, |
<head>! n) Z9 T; _- N
<meta charset="UTF-8">1 J( ~) E9 ~1 T
<meta name="viewport" content="width=device-width, initial-scale=1.0"># q4 Q0 B$ K# n9 ^; S1 C2 e
<meta http-equiv="X-UA-Compatible" content="ie=edge">2 X; z; L. ~6 k8 F8 S
<title>Document</title>! F8 n' x! |. q: K8 b0 x
<style>& c1 F7 `% C; {9 D8 Q: {) h
* {
9 j2 p( a# u( b4 ~" ?1 G& s" z) F; F font-size: 10px;
- H' j1 d3 R: r/ r+ j! V, { line-height: 24px;0 ]: P. t' B) b; E2 h6 `7 M
}# n8 r1 e7 w3 K1 r+ L1 w: M
</style>
: N/ c2 ?( X. Y5 f</head>6 L% r/ q2 N, s7 ~6 T+ f
V0 H1 z2 x4 l3 `<body>% g9 ?- w3 R* L' C3 ^
//this is for the select test- v& ~0 [- r5 M0 K; h
<form id='myForm' action="submit" method="GET">( u. e) D- }* E4 C- |5 [5 u
<input type="text" id="inpuTChange" />! r8 _( e. H t$ z. u0 X A3 `
<select name="selectFruits" id="mySelect">8 N/ ?) U; P2 H) Q
<option value="Orange1">Orange</option>( A# g/ q' e W7 H4 [: K6 P
<option value="Apple2">Apple</option>
' w# A/ z7 c8 Y) Y0 j, `5 c <option value="Banana3">Banana</option>% w; Q: ?4 u- s8 d7 X% l
</select>; ^; ]/ A' L$ i' l6 o* C) s' g
<br>. c3 q b( A" Y5 A; q; _3 U1 s8 Q W
<input type="button" value="disable">
8 v, p/ s# a! b <input type="button" value="Able">, e; I6 @3 A. [' D
<input type="button" value="getValues">' G# J. ^* e" l) ^ a$ y
<input type="button" value="editValues">0 }9 }$ N1 e4 X ?( ?# q
<input type="button" value="addValues">
_0 l" m" d" p <input type="button" value="removeValues">9 L* [* Y/ w: d8 G; e9 V" H
<br>
+ l9 e1 w1 B+ u/ V+ t$ N! G- R& r3 ?. G9 K( L
</form>
' ^- C* o; |2 V1 D! Z: H; L; U6 ^5 T% s1 f/ @" P
<p id="demoInput"></p> N% Y# r8 R% T9 _
) D4 X8 N2 J- h; W; l; n
/ `; G5 B7 [8 `& C) S <script>. J1 i( W& B% S; V+ Z
function disableFunc() {
! _/ k1 O# J4 _, r( R8 E document.getElementById('mySelect').disabled = true$ g& u* k0 {4 ~4 M3 L/ z9 h* ?
}
# Y& Z) |- q' x5 | function ableFunc() {
* _$ P5 {7 y8 B$ D8 ^7 b document.getElementById('mySelect').disabled = false
4 I- V4 X( v: p, E) U7 h% c }( g% v! [! g E2 f# g: \& Y, }* u6 H4 G
function getValues() {
% O! S1 d# ? ]; \ var text = '<ul>'
' p- L9 k# M: h var x = document.getElementById('mySelect')
' |* M% H E+ t: x' |: E for (var i = 0; i < x.length; i++) {
, M# _! b8 I$ F: V L0 s+ [' [- E text += '<li>' + x.text + '</li>'" M2 c( B. u& f
}, M3 s& v3 C! C- T
text += '</ul>'
* _+ }- C8 }( _7 N2 [5 L M8 T& k1 C document.getElementById('demoInput').innerHTML = text
: ?, p& M' N9 U1 r }% b# J! S2 i. G% c5 r" X) s
- }: Z2 }! Q/ m: S5 ]
function editValue() {; Y4 V- k) U8 P2 b j* I
var mySelected = document.getElementById('mySelect')
& X5 |; w3 N% ~' ?! G/ h var selectedIndex = mySelected.selectedIndex$ ~$ x. W: |8 ]3 s+ m! {& X! `
mySelected[selectedIndex].text = document.getElementById('inputChange').value
' X* |9 N" t# x }( T+ c, M& ?4 n. z) S- f3 ]
" u) [) R& U/ {! }9 `/ A+ r function removeValue() {5 w- M$ }( l+ i0 J7 N" p T
var myselect = document.getElementById('mySelect')9 j# U s. V1 Y# F
var selectedIndex = myselect.selectedIndex9 e, ~' ]. S4 p
myselect.remove(selectedIndex)
( `* g( c* R9 o" l1 o } T, U' @. w/ G$ X
function addValue() {7 ~" g1 A; ?- p1 L1 ^, R
var myselect = document.getElementById('mySelect')* r! x* R5 |4 D! d3 J
var addvalue = document.getElementById('inputChange').value2 |' o7 w* E2 b( H' a& S0 M
myselect.options.add(new Option(addvalue,"value"))1 q4 M9 g7 H7 ^! ?% |
}$ b! u' r2 x, x' M& a
</script>7 B s* F4 k' U, _
</body>
6 G: U; N4 M+ L! F7 D
, x) r2 P" f1 w</html>[/mw_shl_code]
, Y# X1 w( I' b* J8 Z |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号-1 )
发表于 2019-11-4 20:15:32
