|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
8 I: g }' A% P$ }! f0 l6 q4 W& k+ a% C0 U
JS 操作 Select相关功能测试& s1 i) `1 r: G# Y4 [0 b$ m. X' E; k
- {# ?* D: i+ b+ I[mw_shl_code=html,true]<html lang="en">: e5 x: L5 n' w8 {
3 R7 g) F! G- L" v4 L9 v
<head>
% t& a ]6 @7 [: R9 U2 N <meta charset="UTF-8">
n+ W. ]: S/ D( ]1 } H <meta name="viewport" content="width=device-width, initial-scale=1.0">( n$ x3 [# D7 M, |* G; y
<meta http-equiv="X-UA-Compatible" content="ie=edge">5 N7 C4 g/ Y7 ?2 D: B
<title>Document</title>4 o! |6 y% ^, s3 h/ ^# \
<style>
; L; l3 x+ {& L0 {. D6 a+ s ^ * {
; l+ C { Q$ y font-size: 10px;7 o! F3 U4 c# i2 p @
line-height: 24px;2 A, q) R% T! s# F2 |
}# l( i8 E) U) s! y D. A/ w( V& j
</style>/ F' K1 T* b3 u2 k+ {* n
</head>
/ J) M3 Z7 [9 L* P1 A; H- E- U2 ?2 F6 w! v0 w7 C, ]
<body>
6 t8 i$ |& ~4 ?. l" B //this is for the select test
% T3 Z7 t0 \( Q! O4 M; Z, e1 Y9 _ <form id='myForm' action="submit" method="GET">
# b: [6 ?. N' Q <input type="text" id="inpuTChange" />
0 F( }/ }7 ]1 ^, O3 g1 B <select name="selectFruits" id="mySelect">$ z Q5 W0 g7 g; T6 A
<option value="Orange1">Orange</option>
) c* p3 h& Z& R: D$ T7 N+ H <option value="Apple2">Apple</option>- V5 K$ v. P, ?# ^9 M
<option value="Banana3">Banana</option>
, V' k; q. V8 F, X </select>
4 [. e- e, ]( X: D <br>- s7 l' Y9 w; X
<input type="button" value="disable">* V2 ^0 y: g) x" I3 q
<input type="button" value="Able">
m9 | O4 r7 o <input type="button" value="getValues">
# R- r) l! t8 _* f. |4 C+ {4 g <input type="button" value="editValues">1 e+ |+ b7 B9 B3 p7 a* T; V
<input type="button" value="addValues">& }, u; U6 W) \' E9 G0 n
<input type="button" value="removeValues">
+ T$ K- _ a( k: h: g5 H7 g; M. [; Z <br>
' p. B& D3 `- r1 s2 X: t/ c& p% {' J* K5 S- N8 f5 p9 ?1 K
</form>
8 u9 s8 b" q, e! y
5 W( h& {& ~+ i* A6 V) T' S) z <p id="demoInput"></p>
- C9 e/ L: T, i+ p3 M. \& A; F! `9 }; L) g1 b
; J J W$ S# Y u
<script>4 L: \& D C% w5 F8 W
function disableFunc() {2 ?5 c1 z; v; a) i" W
document.getElementById('mySelect').disabled = true
: u) {4 N- z! ~; @+ u) y }* Q/ m0 e. m& _: T9 W
function ableFunc() {7 i& s" k! n+ J1 ]
document.getElementById('mySelect').disabled = false) q, i$ V, g; `, I$ p
}1 K* ^% I `& r4 f" Q( R2 X
function getValues() {
" v% |! }0 b" f* {9 u0 {5 a! ? var text = '<ul>'
9 W& h, `" W/ K8 }# G var x = document.getElementById('mySelect')
2 M# w2 I" I; ^5 r; c- s! u* N( m for (var i = 0; i < x.length; i++) {
( n; ^' T+ A( w& Q text += '<li>' + x.text + '</li>'
' Z$ u5 y0 G7 h3 N6 R. H% z }5 V8 y# `" _! A0 t# i6 @) p( c
text += '</ul>'/ q' R2 w, m2 M D7 B: c. L
document.getElementById('demoInput').innerHTML = text
# F& @ e: _1 z$ G }' Q- g2 v& ]8 [
5 A D. c5 q4 g$ O) E1 a function editValue() {- Z; q U0 e, \" T7 E
var mySelected = document.getElementById('mySelect')5 Z- @2 r9 O) f+ `3 N% s
var selectedIndex = mySelected.selectedIndex
6 B6 @( \- V+ _0 s8 @ mySelected[selectedIndex].text = document.getElementById('inputChange').value) W4 y: E1 l* W \, q. y+ G u5 J- _
}$ K6 I" z5 M- g: v
! T, T, q% e k7 g' P
function removeValue() {
" v/ E" a' Z' i* {( R1 f/ \/ b: L var myselect = document.getElementById('mySelect')
4 L) r$ J* L9 P& N! x var selectedIndex = myselect.selectedIndex) Z. v- U9 [% }) G( |
myselect.remove(selectedIndex)
& z& Z. g y; v# Y- a: Y }4 M! b( ^* p4 c1 F" }' L" U
function addValue() {) I9 e0 e2 u; p: d. r `, A7 k# r
var myselect = document.getElementById('mySelect')1 G, S* w! P/ @5 i6 Z+ Y
var addvalue = document.getElementById('inputChange').value
( `1 r$ ] R" f4 P. w$ B myselect.options.add(new Option(addvalue,"value"))
! Z: h9 m& J6 q7 Z: k0 i. z4 e }4 R( I( X: l1 a/ \
</script>, W5 z; S; N, _4 R9 I0 K3 j
</body>
5 n6 f4 P- e j9 z
- D) ` E7 \! K1 @, i+ a</html>[/mw_shl_code]
$ @2 Y: r" |/ Z |
|
|小黑屋|手机版|PLM之家-专注工业软件生态建设，大模型CAD创新生态
( 沪ICP备2026005248号 )
