|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
6 t7 D; ^7 z3 [+ S) G2 b/ @. ?" s5 @' c# o( Q
JS 操作 Select相关功能测试
, K& r- N) j: {: K3 K
; Z8 T; M7 u/ V+ p! l( R[mw_shl_code=html,true]<html lang="en">. c) d6 Z, L" G' D7 Q
' ~. ^0 r- z# |<head>* ^$ g: z9 f, K3 M* [+ q1 a" @
<meta charset="UTF-8">
( @# G+ M) `% \: Y <meta name="viewport" content="width=device-width, initial-scale=1.0">
) C1 `5 A$ m9 O; o- p, a8 P- ^ <meta http-equiv="X-UA-Compatible" content="ie=edge">1 p: K/ ^: U4 O! J' F
<title>Document</title>
; B/ o7 T: ^* J- ]1 I <style>
: N h$ n/ h1 v L% G4 M6 Y * {
4 E8 R# u$ I% P( i+ _/ T font-size: 10px;
# s- K4 t+ G/ X5 w) z7 h! u+ O line-height: 24px;+ S$ e2 ~9 `% X: h: T
}
# J4 P6 e( _# s$ D; f9 } </style>
9 q+ v- o- n6 `* D5 ^5 S% D* n</head>
& M2 E9 D. @; L9 ~3 o, B) h4 D1 u, @7 ~5 y
<body>
" ], _5 W! d! @& W$ V# T //this is for the select test
6 G! O2 E5 c+ \, Y; k <form id='myForm' action="submit" method="GET">+ R5 l& z' N0 X$ l1 s2 {
<input type="text" id="inpuTChange" />) v; v- `: W. p6 a5 g) v
<select name="selectFruits" id="mySelect">. @5 z( @, E( x9 X& h+ x
<option value="Orange1">Orange</option>5 v) ^- r% p- d, ^. L; l
<option value="Apple2">Apple</option>- t% \( M) M$ p A
<option value="Banana3">Banana</option>5 l; W% d( F5 {7 |& @7 x) M( }# n- x
</select>0 C; a# d6 x+ w8 D
<br>
! k! D# {! ?1 E4 K+ ? <input type="button" value="disable">- Y4 R7 Y5 B! p% n6 S
<input type="button" value="Able">8 f7 H0 [2 l2 L+ I
<input type="button" value="getValues">
4 o3 w6 v# D) e0 ]! d3 i( D <input type="button" value="editValues">
3 ~# l6 }5 ~) S# w; I7 q- J7 U9 b <input type="button" value="addValues">
) a- g! a% P2 w0 G1 ^2 g/ r1 r <input type="button" value="removeValues">
5 w# E, {: w+ x& x* X+ N6 l* B- V <br>; F6 a4 I* s" M) [/ b2 t
, q( b1 g& P' k) J# `# x, p6 H$ g </form>8 P# B6 x& ~1 X! v( T6 p# k
# i: D6 l1 b4 `: z6 }4 H <p id="demoInput"></p>
) V( S* g) n$ |/ L' g
- n9 d9 K) _% J) e
$ c+ k5 M5 O& T3 b <script>
+ b1 Y# _9 a8 \ function disableFunc() {& Q2 h1 i% t4 r9 c, t* r
document.getElementById('mySelect').disabled = true6 U5 C: V/ y R+ j1 t6 K0 o# m8 Q
}
; w% M/ K+ C" l function ableFunc() {$ b5 z0 f) S) R, }
document.getElementById('mySelect').disabled = false" O' ? G8 n/ x
}% Z- ^( q! `/ h! x1 z
function getValues() {
- c( @% f+ @$ Y% N var text = '<ul>'
+ T7 ^7 P* M% z var x = document.getElementById('mySelect')5 B5 I' c! e7 l
for (var i = 0; i < x.length; i++) {
t1 [% V; H1 Y g2 k' f3 @4 { text += '<li>' + x.text + '</li>'
# s9 \9 m: f0 B3 [" T( l5 ? }
. O, ]' u- ^" R) M4 c text += '</ul>'
5 C' ~' r+ T$ ^" \ document.getElementById('demoInput').innerHTML = text7 W# }6 |) C9 X4 O: {
}! v: q8 F7 U4 Y! ]# L3 E
+ G' q/ Q1 {( r1 d2 ?0 q7 u& \2 o
function editValue() {" I x/ T8 c0 z( ~
var mySelected = document.getElementById('mySelect')% l( f0 K; W c) M% J
var selectedIndex = mySelected.selectedIndex
" X9 K. a! C0 q- G# w8 b2 \ mySelected[selectedIndex].text = document.getElementById('inputChange').value
! [& X; r( B' Q* E) q }" O0 j; H9 G: O* `+ u7 A' r
, h- S$ r9 ]4 f3 Z7 U/ S: ^& w function removeValue() {
5 L: u3 R3 b: J0 W6 N" T) c! \9 Y var myselect = document.getElementById('mySelect')
7 F/ h1 c* U: D& K8 [ var selectedIndex = myselect.selectedIndex
% A. P) k( Y; I5 S/ f myselect.remove(selectedIndex)
9 o: q5 B Z. D. a" a }/ H) m7 m" b. ~2 m" Q x
function addValue() {8 a$ }0 I4 L, r% |; {
var myselect = document.getElementById('mySelect')
# ~* i; q/ U( V1 `5 [5 x$ D var addvalue = document.getElementById('inputChange').value- @, Q* U6 o! b7 R( R6 [
myselect.options.add(new Option(addvalue,"value"))
* I$ a) j B: |2 P( q }$ B- r. R& E' X; I- d/ N6 G7 C
</script>& ~. R6 ^( G" ?9 U7 ]8 Y
</body>$ R& W. ?" V# u( P
# A/ g! ~8 \" b1 X" W; A- |
</html>[/mw_shl_code]
7 V' B% q# r" J& v. T3 O |
|
|小黑屋|PLM之家-专注工业软件生态建设，大模型CAD创新生态
发表于 2019-11-4 20:15:32
