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>'
7 l4 h0 |8 b: q! O! _          }
) Y0 Z) g1 Q8 R          text += '</ul>'
0 n  U# y+ f  t. [) N) o1 |& T. A          document.getElementById('demoInput').innerHTML = text
: [! Z* \5 c$ e( b/ u& V       }
1 T. v5 Y* |% o. [# d4 e( W! v" i; m' {) b
      function editValue() {; k4 j* O; Y9 b# P8 c# C
         var mySelected = document.getElementById('mySelect')6 ?7 L: D9 w4 p$ D3 P; S
         var selectedIndex = mySelected.selectedIndex
! A, V5 p% I5 G' K3 a  G+ _: A          mySelected[selectedIndex].text = document.getElementById('inputChange').value$ c3 O3 J$ B0 K; F
      }
" K+ h  l% l5 M/ R! Q) U) [
& }% }9 \8 `% j- l9 B       function removeValue() {( \7 C8 k$ S9 o- J7 p# z1 Q
         var myselect = document.getElementById('mySelect')
% J0 a" K$ }* v- ^8 g          var selectedIndex = myselect.selectedIndex
0 q0 H* y; R, B& z: ^          myselect.remove(selectedIndex)
1 w8 W0 H, P- B6 ~0 B/ P. G       }  `; A  }8 I# A5 U
      function addValue() {
) a$ d; F1 A7 P# L          var myselect = document.getElementById('mySelect')5 m9 @7 f$ I- h, l/ O  k
         var addvalue = document.getElementById('inputChange').value
! p/ `+ t! H' v5 Z( ~& F          myselect.options.add(new Option(addvalue,"value"))) D2 z6 Q1 r' A# u1 [
      }6 r( m, c' e" `2 j, I9 ^
</script>
2 `! t3 |; q* i+ b4 O7 X& @% r$ p</body>+ x: U% u# q( L' ^

5 K+ W" A% ~  [: \$ H+ v" Z- f8 s</html>[/mw_shl_code]
$ _$ S  L6 X' y+ F) T# P5 A

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

NX二次开培训

Catia二次开发培训

Teamcenter培训

Tecnomatix培训

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

热图推荐

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

admin 楼主

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

发表回复