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>'
, m+ s$ T2 E. L3 q, `. S          }
' O- c' j2 j, M: H% ]- ~. t          text += '</ul>'0 {* U) K7 M5 y& r$ I6 V5 {
         document.getElementById('demoInput').innerHTML = text; Z9 o$ Q# Y( v* H+ V
      }  `# h# `2 v% T8 m5 t, i; ^

$ r/ S! V" C" N$ R% E1 X       function editValue() {
* S8 H0 ?0 z1 {+ g          var mySelected = document.getElementById('mySelect')7 _/ y8 V9 ]& V8 C* e2 p- D1 d
         var selectedIndex = mySelected.selectedIndex
! x% @4 E2 g2 @$ x$ v9 H          mySelected[selectedIndex].text = document.getElementById('inputChange').value+ z; x, p& e9 M" {2 t$ H+ K
      }) {( V2 Z2 y+ {1 S. s1 ^
) a+ _8 C; c) [9 g. k
      function removeValue() {- T) r, Q( H' K# q
         var myselect = document.getElementById('mySelect')
/ y- a' y0 g! }          var selectedIndex = myselect.selectedIndex
. H# Y* b: a; k# T          myselect.remove(selectedIndex)  F8 V5 k1 y1 Q2 ^, g5 m1 Y
      }6 V( n  m+ O% _1 c6 V% S: S
      function addValue() {: R5 N; X$ }' \1 d6 E! m
         var myselect = document.getElementById('mySelect')2 X3 V7 ?& v- ~1 C8 |9 k
         var addvalue = document.getElementById('inputChange').value
' S9 c" t" b. S+ R) @1 i7 R$ X# o          myselect.options.add(new Option(addvalue,"value"))- k4 B5 n  P' X" v8 F
      }. T  i3 ]/ \( s5 q2 \
</script>
) I7 C2 r8 x( E) k</body>
+ I7 }$ {$ r5 u6 e9 [( u& B# l8 t, {0 v( O  s. W- o
</html>[/mw_shl_code]
% y7 L4 @+ U# {7 C, S

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

热图推荐

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

admin 楼主

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

发表回复