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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x
% U* |: L& }$ S: |

$ @# Y7 M3 S- TJS 操作 Select相关功能测试
' c3 H: m$ L) p3 h- Z& c  c7 [9 G: l: |; I
[mw_shl_code=html,true]<html lang="en">% h8 W# a/ P4 y( Z. w: B7 t  ?& |2 u
7 U" l) z( c$ N! a
<head>) C: e5 h  w$ ^/ r$ l
    <meta charset="UTF-8">
  n3 r4 A" J. K2 D$ e    <meta name="viewport" content="width=device-width, initial-scale=1.0">
( I2 {% ?' Z; T% _1 C    <meta http-equiv="X-UA-Compatible" content="ie=edge">
# g7 f# {, W/ s; W4 P    <title>Document</title>9 g$ {% H& @: _: t5 o" J; l
    <style>
" i/ x5 v) L; C  a9 V6 @        * {
* u- C# N' T+ M1 T3 i2 p/ o0 Y9 s4 H            font-size: 10px;$ E3 j# L$ n7 e& _( v5 x* a8 a
            line-height: 24px;
% I) v0 g- Y* P/ g- U* v. z        }! a/ O# K. s# r- q( E, T
    </style>
, B0 W3 K- @- d% B</head>
+ S" P, y' ^# L# q' f6 _& y- ~  M: X6 x: a0 Q
<body>4 f9 Q& k1 d) D7 Q5 ?1 u+ H
    //this is for the select test) t" O% {5 ?# c0 d
    <form id='myForm' action="submit" method="GET">! L0 D9 |0 }% e0 M5 g9 t0 m/ _
        <input type="text" id="inpuTChange" />
2 W; Y: j: Y& S1 Z! d- X        <select name="selectFruits" id="mySelect">8 {' l$ l" H' w& R( U
            <option value="Orange1">Orange</option>
: E* K5 K# |9 {# S# b/ ?7 ?$ p            <option value="Apple2">Apple</option>6 g2 I* J3 p/ h" z# ~& Q: P
            <option value="Banana3">Banana</option>! R4 o1 V) O. a+ n
        </select>
& c/ u0 p/ [3 p# J, J9 ~9 G. ~        <br>
- V) ?' D/ l7 P* p& a8 o0 d        <input type="button" value="disable">
0 i/ [$ X( B2 m$ d' u) o; Y        <input type="button" value="Able">
! K  _* }6 l6 t* j        <input type="button" value="getValues">8 E+ |, k% l/ F. X) U! i
        <input type="button" value="editValues">
, M) |) s& k( [) e        <input type="button" value="addValues">1 e: o/ J$ k% d# m# ]& f8 {' b
        <input type="button" value="removeValues">+ y6 o+ q$ R0 t, x: J/ c
        <br>! \; e+ U0 m+ O; a+ r: n) C
4 g' M9 q1 ]) A' v5 C8 N
    </form>0 @" ~& S' t" g7 W0 j

7 q) l, |- ~) B+ {  R4 }8 j    <p id="demoInput"></p>+ Y2 ?3 ]; y9 V
: ?9 f$ P* c! C( ~

7 J% p2 L  S. K+ f# m7 w( j0 x7 L    <script>
3 C+ h0 M8 R! n  D  I        function disableFunc() {
4 `- V  x/ x3 q0 A& ~5 i* u/ j$ ~; g+ C: n            document.getElementById('mySelect').disabled = true
  x+ J: n) U" U% @* \        }; Y1 X( g% R9 U
        function ableFunc() {9 Z3 E# ]+ j1 ]* }- e5 M/ k9 y0 v* Y$ x
            document.getElementById('mySelect').disabled = false0 O: c" r: J/ T/ }! y# b/ p
        }
. x# H+ D4 g, Q1 c% H4 h        function getValues() {- L8 b* P  H! ~2 H! ]/ A
            var text = '<ul>'
. i% x: {$ m$ a1 O) u            var x = document.getElementById('mySelect'): D$ L, G4 G# \: r3 v
            for (var i = 0; i < x.length; i++) {
+ |) A6 ~, I( K! A" b                text += '<li>' + x.text + '</li>'
; w5 U0 s& v: f) F; }            }1 A1 E6 F& o& S: e# F
            text += '</ul>'/ i* [  e3 w/ v6 ?; H
            document.getElementById('demoInput').innerHTML = text& [) G; _# K7 z- h3 Z
        }
5 F" B  Z1 G. ?3 d
/ O) E3 Q9 I% d  e8 n        function editValue() {
3 L- ?, K( r% r& u9 p( b% q            var mySelected = document.getElementById('mySelect')
1 f$ @; p/ k; A# i            var selectedIndex = mySelected.selectedIndex% F& \2 G/ F  f/ i
            mySelected[selectedIndex].text = document.getElementById('inputChange').value
* V' o0 l/ B9 D9 |- ^9 r" L" |+ O        }& ]: }8 E( R* q" E" O
+ P2 M" j" c$ e4 Z% f
        function removeValue() {( u  y+ K7 N9 J1 G# V7 X9 p% p
            var myselect = document.getElementById('mySelect')0 c2 w, @( z6 \. c$ h
            var selectedIndex = myselect.selectedIndex
( h5 o8 X& R: `/ x1 p% Y            myselect.remove(selectedIndex)
/ N! k8 |2 t4 r4 b        }2 l$ g" O* i7 O8 O
        function addValue() {
. {2 w# }( m6 |6 g: P- H1 h4 p            var myselect = document.getElementById('mySelect')
4 N+ q9 Y4 i6 n: B( u, K            var addvalue = document.getElementById('inputChange').value4 T4 S6 v' V" h. d$ d; x
            myselect.options.add(new Option(addvalue,"value"))! y/ ~0 ?* L+ W# \
        }
) l" ~% M1 u" f4 ^% i  `# a    </script>
' r/ ?/ X9 s  z7 ]" R</body>
/ Q) O  @; r: Y
2 X. D5 B% J4 K) D+ _( h</html>[/mw_shl_code]; ]$ o0 G# o7 J+ a
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了