PLM之家PLMHome-国产软件践行者

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x
9 P' V( ]+ Y5 ^+ W1 z$ v" @

+ J/ v+ p( m% {; ZJS 操作 Select相关功能测试
3 O9 O* E, Z+ X7 Z: J
! F; c; |0 B, R9 L; ^: q% C[mw_shl_code=html,true]<html lang="en">( x! c. f* L% _9 E9 J# _7 o

2 r  u6 x7 x9 t2 z" d5 H1 v<head>
% Y+ ?. O3 U9 c: f    <meta charset="UTF-8">4 [# @4 I" F9 F3 v
    <meta name="viewport" content="width=device-width, initial-scale=1.0">" f/ {+ J  u+ _( c; h5 d% e
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
% ~# V# L8 Y% t- ?    <title>Document</title>; `  s0 g5 B5 N& d7 g7 `
    <style>
5 @: n% V2 m4 _6 z$ s, X        * {
& r& R2 L, W2 l+ r* d" I            font-size: 10px;2 j. \& B# K9 C/ s# R! L
            line-height: 24px;3 [/ t# i" ~( F$ k1 ~1 I
        }
& g% [, i% E# m4 K$ d    </style>
. ~$ W  m8 F% e- {& @</head>9 X; b5 g, r) M* P- q
+ B2 C  R1 _2 a  u8 W9 \
<body>
  u) \% I" b) T0 \; P* `    //this is for the select test5 \. X  |3 C9 j- m: v
    <form id='myForm' action="submit" method="GET">% j4 a# {) V1 ^- U+ Q
        <input type="text" id="inpuTChange" />
9 c8 i! n# O+ o  b/ y. R        <select name="selectFruits" id="mySelect">2 t- E# O( R0 ]" e$ E% d
            <option value="Orange1">Orange</option>6 `0 m5 g$ B. @7 ]
            <option value="Apple2">Apple</option>2 ^  j$ D" w: R, R! Q% Q5 [
            <option value="Banana3">Banana</option>: K1 A7 A* }9 k. Y
        </select>
; Z& J% b$ J4 t/ [2 m. Z        <br>; C% ~! \6 _6 S
        <input type="button" value="disable">: }5 P6 E' M8 b3 Y' B
        <input type="button" value="Able">
: r5 e9 ~1 f$ _; Z        <input type="button" value="getValues">  h+ }" D) Y9 _% F* g7 y* m
        <input type="button" value="editValues">
0 M2 F2 X/ g4 H) }- k        <input type="button" value="addValues">
' y' B: w+ I" Q9 k: Y$ F        <input type="button" value="removeValues">
6 P/ V. U/ n4 f0 p% K$ N) }8 a8 R        <br>
+ t2 b) e) E# o8 t8 v; r# c# Y, \9 ?8 ^1 i. A9 B  L# P' ]
    </form>1 K( V5 \4 v! ^5 S6 V) f  ~
# h  G* A( w2 x0 v3 e5 j
    <p id="demoInput"></p>
% D# h9 _' p* _+ u: d: p2 M
1 v' w% Z; B2 ]
  M+ A) s$ s' z9 u    <script>
$ y* |% p( k( U; f# C# l7 d        function disableFunc() {
4 ^2 T+ o0 ^, V) {& u" s( o, m; g            document.getElementById('mySelect').disabled = true
0 W- R4 ]  Y/ x5 I; _        }6 V* V) p& Y  x8 G0 w* }
        function ableFunc() {
9 e2 {5 D. q2 O/ {( a/ z$ T            document.getElementById('mySelect').disabled = false
$ \1 a$ m+ v( W) Q        }  v1 H+ m, x, v; ^3 [" Q4 O3 v5 `, G
        function getValues() {8 B$ M1 p7 K4 k5 ?+ N
            var text = '<ul>'
9 ^) D8 e# j8 @* B- X* w; s            var x = document.getElementById('mySelect')
! h" S1 K/ n7 V4 |2 g* n3 v1 n$ |+ j            for (var i = 0; i < x.length; i++) {3 b# P: m, I  k/ R
                text += '<li>' + x.text + '</li>'" `, L: x" E5 N$ o9 V1 g; K( p: ~: K
            }( a- x, N# o* W# S2 M" o4 r& O9 r" {
            text += '</ul>'5 J. x- i7 K* n5 O
            document.getElementById('demoInput').innerHTML = text
& W) z9 ?* d, [/ A% @; E* p        }3 t6 W1 z0 g) ~/ M7 k" ~
) u& C5 i8 R- h
        function editValue() {  k/ R8 y  ?: o2 Y9 u- |) T
            var mySelected = document.getElementById('mySelect'). y# h: Q  s3 w8 P
            var selectedIndex = mySelected.selectedIndex! Q9 U. P1 W2 ]- j3 S' E4 i  U
            mySelected[selectedIndex].text = document.getElementById('inputChange').value
) c" ?/ d8 T' X% u# S1 P" R' k9 x        }
! T! ?  @; @" F5 c& X
7 U. H1 D; K) F, g' @! q) O5 S        function removeValue() {  C4 f5 w) l: Z# J* A+ y( R
            var myselect = document.getElementById('mySelect')
- H+ T; a7 l9 G2 {# F! h            var selectedIndex = myselect.selectedIndex& Q: i: o( R; p9 F
            myselect.remove(selectedIndex)1 L1 C2 r+ S! K! D2 L0 D' W
        }' Y+ K8 e. D( P3 |
        function addValue() {  F. N5 N. \; q# u+ n
            var myselect = document.getElementById('mySelect'). h5 f; a8 I% h6 c: J- u# p
            var addvalue = document.getElementById('inputChange').value
2 z1 o1 v0 ^) A0 q) [3 z            myselect.options.add(new Option(addvalue,"value"))
) S" O7 c3 K9 a! N        }' {  g/ h2 J/ W, H; e
    </script>
: N+ H  M- Y0 e, [( f# y2 s' ~- ?</body>
! b8 g0 C$ U# V9 o5 v0 ]9 o+ F. ]; q5 W2 o
</html>[/mw_shl_code]; a& I  X8 H: `& q* Q8 k, W2 K
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了