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>'
+ @0 |& c7 h. R0 e          }
- ~$ {# R- d% B- {          text += '</ul>'1 k. C) L! T8 t; i) `; l' z  k& i
         document.getElementById('demoInput').innerHTML = text
7 |! y' d" G  Y7 a6 J       }
3 O. n' q$ c) Y
4 J6 m* I; X4 P. G       function editValue() {" [# q1 A( Q% ^- k- v# B
         var mySelected = document.getElementById('mySelect')
6 W$ ^* b' D9 `  e          var selectedIndex = mySelected.selectedIndex  X2 j$ q9 c9 ?' C5 l4 J
         mySelected[selectedIndex].text = document.getElementById('inputChange').value- w# \. F$ O7 C
      }
; R! B8 _1 y" G+ I: J" b( E
3 B; r9 x3 G* x% I7 e       function removeValue() {4 q* M7 ~& v" i! a- x. ?) M  z
         var myselect = document.getElementById('mySelect')% P' }$ F% {, p1 P
         var selectedIndex = myselect.selectedIndex
; A+ e  s% q! o$ G7 M4 _! m; W          myselect.remove(selectedIndex)
# w6 _. V* F( U/ z$ w" c       }& p/ @0 H) X+ x/ N8 Z
      function addValue() {
% j, Q" v; I9 Y9 B/ I          var myselect = document.getElementById('mySelect')
% Y' i0 D: I# y8 C3 u6 i          var addvalue = document.getElementById('inputChange').value
0 Y$ \: c* {' `$ U" z: L% D3 i! X/ D          myselect.options.add(new Option(addvalue,"value"))$ M, T' J7 ]$ B" O
      }# F& Y( w' [2 E8 }) r  _4 f
</script>
% h3 Q6 Q* r$ q8 [9 I, j: @# C</body>
8 R0 q0 r+ e1 ]0 W8 Q
, {+ [, _. g6 C# [</html>[/mw_shl_code]
& P9 D: U0 P1 Z; D

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

热图推荐

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

admin 楼主

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

发表回复