JS 操作 Select相关功能测试

admin · 发表于 2019-11-4 20:15:32

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

您需要登录才可以下载或查看，没有账号？注册

x

JS 操作 Select相关功能测试

[mw_shl_code=html,true]<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
      * {
         font-size: 10px;
         line-height: 24px;
      }
</style>
</head>

<body>
//this is for the select test
<form id='myForm' action="submit" method="GET">
      <input type="text" id="inpuTChange" />
      <select name="selectFruits" id="mySelect">
         <option value="Orange1">Orange</option>
         <option value="Apple2">Apple</option>
         <option value="Banana3">Banana</option>
      </select>
      <br>
      <input type="button" value="disable">
      <input type="button" value="Able">
      <input type="button" value="getValues">
      <input type="button" value="editValues">
      <input type="button" value="addValues">
      <input type="button" value="removeValues">
      <br>

</form>

<p id="demoInput"></p>

<script>
      function disableFunc() {
         document.getElementById('mySelect').disabled = true
      }
      function ableFunc() {
         document.getElementById('mySelect').disabled = false
      }
      function getValues() {
         var text = '<ul>'
         var x = document.getElementById('mySelect')
         for (var i = 0; i < x.length; i++) {
            text += '<li>' + x.text + '</li>'8 D! g. m7 G+ [! @& V
         }
4 h5 }7 b( U5 @/ A          text += '</ul>'
6 |6 A. N$ A+ O, w: A          document.getElementById('demoInput').innerHTML = text+ R5 k7 {$ h) P) F1 `- g
      }' |- t& Z% f1 c. q" p

  f+ Z" Z& Z( ~$ i5 C       function editValue() {
  O- H# i* f9 {1 e          var mySelected = document.getElementById('mySelect')
7 o/ L2 k& ^. v6 K, T% e" \8 U, L          var selectedIndex = mySelected.selectedIndex
. d2 s- q" @0 P/ J2 }          mySelected[selectedIndex].text = document.getElementById('inputChange').value
- K( o; G0 W& R* x. v' s' Z       }9 b! f8 a- g# j+ G, Q" R/ U

* Y+ d9 d% v3 J3 V% R& J       function removeValue() {) \& ^* d6 ^5 N; [& X; s
         var myselect = document.getElementById('mySelect')
& x- D' Q+ D+ S7 y4 `$ t          var selectedIndex = myselect.selectedIndex8 H! `" a( Q5 t% e, D6 m! t& j( d* Z
         myselect.remove(selectedIndex)
; `% R- G: ^7 }' L) C       }. E! w* ?, V+ q, j! |" D
      function addValue() {
+ ?  O3 _- q' D          var myselect = document.getElementById('mySelect'); O' p7 ?8 x) [- T0 ^9 O  e
         var addvalue = document.getElementById('inputChange').value- p; B  \' N; y" b) H* o" m) ^
         myselect.options.add(new Option(addvalue,"value"))
7 m/ e5 l% ~/ k8 Y9 P: B       }  F- T$ O& _! |' z
</script>; R( h7 \3 a" D5 @6 f% C0 m2 A
</body>5 F: j9 P. h* `1 g, Y2 F* Y
# _) {& ^1 m5 ~: n: h  ]& F5 m1 a
</html>[/mw_shl_code]
: ~, v1 e* C* b$ {' w% u

PLM之家精品课程培训，联系电话：18301858168 QQ： 939801026

NX二次开培训

Catia二次开发培训

Teamcenter培训

Tecnomatix培训

PLM之家PLMHome-国产软件践行者

热图推荐

[前端框架] JS 操作 Select相关功能测试

admin 楼主

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

发表回复