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>'
. Y% @  w3 ?+ v2 e3 k# W          }
" G  D# J& K5 f5 O. v' }1 D          text += '</ul>'2 o- V3 y8 P  m, ]9 k. j
         document.getElementById('demoInput').innerHTML = text
5 B3 _: T" x2 l6 N% d) R       }  P+ G. B+ V4 W

9 W& I! M; u! c9 T: O       function editValue() {# E! n% I, V$ K& c/ ?
         var mySelected = document.getElementById('mySelect')
$ l. i3 `3 a& r, D          var selectedIndex = mySelected.selectedIndex
0 ^  y- r7 q! S3 ]) m          mySelected[selectedIndex].text = document.getElementById('inputChange').value0 a$ \4 M' X: k
      }+ H4 \* A1 l9 @: y
8 a8 u- u7 f& ]
      function removeValue() {- @4 h5 P  L4 D6 v$ m; H
         var myselect = document.getElementById('mySelect')
+ C, z/ X, x2 h6 }5 ^          var selectedIndex = myselect.selectedIndex
. y; z& c) r, v6 N6 M! o6 a( y+ ~          myselect.remove(selectedIndex)$ I7 M& k# J7 S9 m4 P. g
      }
+ e8 N6 N5 j5 q% m+ w+ T  {       function addValue() {
9 A& x3 w& I. j! M6 C" `          var myselect = document.getElementById('mySelect')& N- A- P/ |5 I
         var addvalue = document.getElementById('inputChange').value
' Q5 k% S2 [! b& z$ V0 e, R          myselect.options.add(new Option(addvalue,"value"))1 _! l8 p* [. X9 {2 n
      }
7 ]' I' o# I+ k$ J </script>- T0 w0 Z( f/ S* ?! b4 D: z0 `
</body>$ f9 v/ Z3 u& O' Z

8 S7 I7 Y5 ~$ t1 w6 O( v* b  A</html>[/mw_shl_code]' a* `+ O1 S: w7 l

PLM之家PLMHome-工业软件与AI结合践行者

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块