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

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

[复制链接]

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

admin 发表于 2019-11-4 20:15:32 |阅读模式

admin 楼主

2019-11-4 20:15:32

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

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

x
% c8 o$ L* }, p% v# X" V+ ?& G

( Q% N# T0 u( ^4 `0 XJS 操作 Select相关功能测试
8 ~/ }6 {2 t5 h  z: X6 ?0 _4 e8 c! X) m
[mw_shl_code=html,true]<html lang="en">
* Y6 h9 W0 U, y3 b8 R$ D" |& p2 e+ ^- `6 k0 w
<head>' G. q# r6 c9 }" W
    <meta charset="UTF-8">/ ~3 |3 Z, N  p
    <meta name="viewport" content="width=device-width, initial-scale=1.0">6 Y1 _2 C$ i/ p: a  v$ r* r# I( u
    <meta http-equiv="X-UA-Compatible" content="ie=edge">4 l6 D) S  y" D- G3 ~
    <title>Document</title>
0 ^4 M: `# J/ {& U0 {    <style>4 A% Z4 r: L0 o! U4 X
        * {" P4 O. S* ^5 D' ?9 W: O* G2 L! M
            font-size: 10px;
5 b* h% m0 W$ a8 K( |$ V            line-height: 24px;
5 Z- z+ E! X9 B3 I9 L) B        }
8 w1 E0 l3 m+ f( }$ I' }# S    </style>
7 a$ G1 O) Y7 n. }- [' r- T1 j</head>
0 `* V' z6 g! n9 R1 y% G; X- V/ G; ?' C1 h" T4 v
<body>
8 L3 J7 L4 j! w1 y: \    //this is for the select test
4 L* G4 `1 _! l" m: {3 d3 ], i" N    <form id='myForm' action="submit" method="GET">! Z3 s+ Z1 \' n( @3 y9 a
        <input type="text" id="inpuTChange" /># y* G9 z0 c6 f! Q
        <select name="selectFruits" id="mySelect">  P" N. `( l, U" z: Y. c0 F0 k
            <option value="Orange1">Orange</option>
8 D4 _+ ]- v; M            <option value="Apple2">Apple</option>
! k) }1 I: q( U1 S7 l% B            <option value="Banana3">Banana</option>
0 x# \; @4 o1 G        </select>/ a( _. o( R- x% t6 C
        <br>! ^$ i" C/ j" x" m. I3 Z( A6 Q
        <input type="button" value="disable">
" o( o, \- g9 n3 M" H        <input type="button" value="Able">7 B" M- r  t* F, A1 d' S9 o
        <input type="button" value="getValues">
, d& ^& h8 I' ?& i2 n4 L        <input type="button" value="editValues">
  Y* B. `0 n! D" D. b        <input type="button" value="addValues"># g0 o. z1 `5 v8 X; s* w
        <input type="button" value="removeValues">
( A! q3 v  r. X7 S        <br>
. m0 B8 _5 k+ }  u, w3 p; n5 U9 A+ S& e# H
    </form>/ Z( ~: N  @. t5 ?0 ]) I

# [, `- ?6 {* i5 F    <p id="demoInput"></p>
! _5 E5 _8 A+ U" Q7 Y) v6 U6 i0 h+ @  `0 ~9 i+ p5 }

# L' i8 t; ?  X( C    <script>% T$ x: r1 E5 U0 F
        function disableFunc() {" |, F4 u3 C1 ?* P$ |
            document.getElementById('mySelect').disabled = true
5 C( S6 \5 {7 A9 p7 V7 T        }
" ^9 H+ s6 `4 `4 X+ l9 J- R        function ableFunc() {
0 e) j/ o8 B5 k8 L3 Z- _5 F            document.getElementById('mySelect').disabled = false5 s7 m/ b( S. M8 i8 c% S
        }6 F! h) P( J# _/ z) j5 Z5 I
        function getValues() {
6 a1 G# }4 k* _0 I            var text = '<ul>'% W1 a+ T. J6 I' u" L- H8 B! U
            var x = document.getElementById('mySelect')7 G' _0 S; [4 y. Q( o7 y* p1 w" s
            for (var i = 0; i < x.length; i++) {* M& Z  V2 v" p& H
                text += '<li>' + x.text + '</li>': n; L& l( c2 @- ^  a
            }
7 F$ I# M: \. c  N0 t" [            text += '</ul>'+ E4 p6 ~. B6 S6 {! ~
            document.getElementById('demoInput').innerHTML = text% e; S$ G& i) y( h% \& ~: O! W
        }
1 v: s  u$ E- F- d# `+ k$ h  }
3 x5 I- |, H% c" D: x, j        function editValue() {
$ }& t8 P5 f/ k& n8 _  T2 ^4 O" _            var mySelected = document.getElementById('mySelect')
; g" d% ]) J6 z& U7 |/ M            var selectedIndex = mySelected.selectedIndex
3 t; j9 T$ f, j- K# b            mySelected[selectedIndex].text = document.getElementById('inputChange').value: W; S9 P$ X5 b2 ~5 u' L
        }
( n, A8 b9 G! A& V
+ w. \) n0 U7 [; C+ ~        function removeValue() {
! f; }& d! K) E' b( O5 o; k# `+ q            var myselect = document.getElementById('mySelect')
2 `7 X. z* A/ f8 ?            var selectedIndex = myselect.selectedIndex) b' r/ H  x( N! w. n) ?, h: v% E
            myselect.remove(selectedIndex), s- A; s, [3 d1 j! `/ t
        }
0 r+ E9 M! H& M* x        function addValue() {  J4 h/ Y3 u4 z1 q
            var myselect = document.getElementById('mySelect')2 L5 [1 c+ G8 G! |5 @! E
            var addvalue = document.getElementById('inputChange').value6 q6 }: f1 B& x8 P& U7 z, K
            myselect.options.add(new Option(addvalue,"value"))
- v' _" a8 U& f% i" B& Q        }$ t% u0 X; u! {+ ^. A6 i" c* |
    </script>- L1 [) B! u7 b- L4 G
</body>& \5 m4 N" |2 u. T
2 H5 V. l2 G; M. Z$ p9 |, K
</html>[/mw_shl_code]/ w# F' Z, |' l# f7 M9 h
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了