PLM之家PLMHome-工业软件践行者›社区 › PLM之家-自主工业软件/开源软件借鉴 › AI 人工智能学习专区 › JS 操作 Select相关功能测试

热图推荐

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

2019-11-4 20:15:32 2176 0

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

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

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>'
$ x- }* z( P7 p- j, ^          }
: d7 r$ k, M) N0 l; v, a          text += '</ul>'& b4 r/ T6 t- U9 ~) p8 e- T
         document.getElementById('demoInput').innerHTML = text; [9 E. ]7 K  n/ t2 |
      }( v. }! f, v7 a! P- L
/ b; i% ^/ Q( l& q/ G% s2 q
      function editValue() {
7 L4 p0 q  S7 S% T3 F/ n6 L          var mySelected = document.getElementById('mySelect'), \' N( k4 K' @" @+ ]1 l
         var selectedIndex = mySelected.selectedIndex: B( c. ^1 N% m5 i( G" J* e% a
         mySelected[selectedIndex].text = document.getElementById('inputChange').value
+ c5 L) v) Z) M! D       }
5 o0 `5 l. R5 x3 y9 h6 R, o% g' V+ r% k1 q" w1 `
      function removeValue() {7 L% x2 |0 G) g5 \) Y/ F- Q6 g
         var myselect = document.getElementById('mySelect')
! X6 ~2 Z/ G- @$ \. ~          var selectedIndex = myselect.selectedIndex, t# b1 H# ?, n  {9 X  p
         myselect.remove(selectedIndex)' m  D$ X. H' b- i: [3 u
      }
4 r& A/ G- a- r! ?7 V6 \; B% H7 e: E, L       function addValue() {
2 _2 k8 R. `  V$ P' Z7 Z          var myselect = document.getElementById('mySelect')
. f: `; Y4 r' D$ k+ ]( G          var addvalue = document.getElementById('inputChange').value
* I1 t- w1 D+ b+ \          myselect.options.add(new Option(addvalue,"value"))$ }& ^& ]6 v8 u9 d8 x. A
      }
! W) D/ @/ n1 c3 Y </script>+ V4 `6 B( o/ M& O+ y, g
</body>
, z" M% j+ A% y7 l- r! n2 P; `: X+ r3 l: n& ]) X0 a
</html>[/mw_shl_code]! f5 [! T- L! c# F" o6 k

上海点团信息科技有限公司，承接UG NX，CATIA，CREO，Solidworks 等CAx软件，Teamcenter，3D Experience等PLM软件，工业4.0数字化软件的实施\二次开发\培训相关业务，详情QQ 939801026 Tel 18301858168 网址 doTeam.tech

使用道具举报

返回列表发布主题

PLM之家PLMHome-工业软件践行者

热图推荐

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

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

发表回复