|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
9 s; f5 Y. W" D H
0 z$ D7 r0 H3 i; i7 hJS 操作 Select相关功能测试1 n* x' X9 F. B" K
6 U# Y- Q6 G) ]; D6 Z) E[mw_shl_code=html,true]<html lang="en">' m4 e0 D% ^; g- n. J" N
* x/ g, o# [& @$ k" h w2 K
<head>
( Q3 l$ h# ]+ d3 F/ @# y" P/ u2 i) X% W <meta charset="UTF-8">8 v; e+ ?/ _* ~7 y+ ~
<meta name="viewport" content="width=device-width, initial-scale=1.0">
' T& G% @1 U$ ]- _ <meta http-equiv="X-UA-Compatible" content="ie=edge">
$ G/ M+ C, e4 e5 o! I <title>Document</title>( H: A6 H0 V( N i8 \4 @" L8 O
<style>
7 L3 m$ T" z/ M! K * {
. ?0 N1 g1 r, x font-size: 10px;
) _! ?+ a8 e0 @+ v$ C3 L7 B line-height: 24px;( u" k6 J, K" [6 v: \
}
$ o+ l: G+ I5 i( i& _% v: w$ S, c </style>
( m' x/ \0 x, n! n</head>2 I# t3 y& n. K% S& ^2 u) _0 N
1 i- t% ? g5 b# ^ G' J; T) g
<body>
4 a8 \4 \1 H, ^ //this is for the select test' a+ W/ p" g/ ~, d
<form id='myForm' action="submit" method="GET">
4 X& R4 L6 U' q" \- l& k' R3 P <input type="text" id="inpuTChange" />9 u- I6 p* }$ g% W# m4 |
<select name="selectFruits" id="mySelect">
% \3 Q( u4 j0 b c; x% c' q <option value="Orange1">Orange</option>
x8 v$ G4 a/ W J <option value="Apple2">Apple</option>
8 J1 q( O1 M$ Q7 S9 A7 s <option value="Banana3">Banana</option> J3 i- K9 E2 N# g& s, S( b$ j# r
</select>. X3 P- \% Q9 t; V& k9 K V/ z
<br>
$ I# K! d7 d/ F8 h1 } <input type="button" value="disable"># |+ j1 W, K4 Q H) f
<input type="button" value="Able">
" @9 \) X! {" M <input type="button" value="getValues">
; B6 t2 B0 k! e <input type="button" value="editValues">
7 s5 g! p }+ T C; j5 ` <input type="button" value="addValues">
( O5 S8 H4 l5 O# Y+ s! L <input type="button" value="removeValues">4 t: K2 Y0 F, ~8 D8 q
<br>
+ z8 ?' }. ?; C; y/ t+ M m
' s' v& S0 n8 T L* i: D </form>
9 y. G7 b: d" U) r
' w9 b9 }5 U* B9 K$ a9 Y; S9 m: H <p id="demoInput"></p>
! r% {/ N: N% o9 L0 M9 @* [3 U" @$ `, n
: A* w4 f7 F8 U1 p4 i0 v* z. h <script>7 ^3 r0 }3 P$ ?) c9 Q5 R2 w( x6 I T
function disableFunc() {
8 r! g% S/ l; k% K' t2 p3 a, L6 Z document.getElementById('mySelect').disabled = true
1 O) J/ H$ v! U, {% u }! u, q* H- a; _" }6 B
function ableFunc() {! G5 q# H' K( ?9 U2 z
document.getElementById('mySelect').disabled = false
/ L+ G5 m0 a& b$ ~, |4 ~2 X }
; Y& B( `, q# C- g, j3 O function getValues() {
6 y* V4 G" v; v var text = '<ul>'6 B5 W J7 E' j- H( M6 b' g
var x = document.getElementById('mySelect')
, X& a. _! U7 W; j! E$ d3 K! s for (var i = 0; i < x.length; i++) {
! S; _2 ~+ k! q' B! Y! h5 n text += '<li>' + x.text + '</li>'
8 S/ G$ r( e u* w }* y* R- b' B( e7 E. k/ P& y! Z
text += '</ul>'
2 n! R) Y9 ?+ u+ O document.getElementById('demoInput').innerHTML = text
: G' D4 H; V, x% S; {0 P9 H1 v$ r# E; ` }: }6 U2 }; x5 Z8 y3 M. Q
$ c+ A# G+ D7 W; W8 o4 p3 j/ r function editValue() {7 x1 S4 d9 A8 k1 X$ o
var mySelected = document.getElementById('mySelect')2 ?: N; J# C; P1 I
var selectedIndex = mySelected.selectedIndex& J6 Y S1 T+ E" {; u
mySelected[selectedIndex].text = document.getElementById('inputChange').value
3 A1 @1 R0 w) F } G" C2 a* j( V1 n6 g) L# z
4 R \$ ~9 w. M) v function removeValue() {/ ?' P# u7 z5 E q8 H2 m
var myselect = document.getElementById('mySelect')
$ j. g# B5 ~* B: s/ \* } var selectedIndex = myselect.selectedIndex
, U1 @6 w6 K2 y) B; R: w myselect.remove(selectedIndex)4 M7 o% o' T7 c/ J( v0 x- {- H& O
}9 F+ s4 c2 l) b8 z2 {
function addValue() {: | }% X3 D3 g- |
var myselect = document.getElementById('mySelect')
" D7 x4 W- t x8 `: @% z var addvalue = document.getElementById('inputChange').value$ q) H: _+ ]# L
myselect.options.add(new Option(addvalue,"value"))
! N6 ~4 |1 z. v* c2 |/ f }( K2 l% n( s- }4 X7 e8 D1 y9 l! Y
</script>4 d& A4 ?$ K! D8 X/ ^! p" q
</body>% u' j' l }! H! s4 K
* `. D. R7 U& c
</html>[/mw_shl_code]
" C6 t% X7 O: V$ E" I% o, W! U |
|
|小黑屋|手机版|PLM之家-企业数字化转型工业软件学习平台
