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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x

0 x' o6 u0 b2 e" I# K
7 W. }- n  _1 Q3 VJS 操作 Select相关功能测试( t2 k3 Y1 g2 ]4 e* ?; n

9 A' j( M) r' z0 j4 z% [[mw_shl_code=html,true]<html lang="en">
" e0 S4 X/ q  D  l  f2 p0 u% f0 |+ k3 w' e( ~" O0 P
<head>" L0 P7 _) @! ^8 z4 c
    <meta charset="UTF-8">( V4 a6 `' H- K& U3 _3 a
    <meta name="viewport" content="width=device-width, initial-scale=1.0">+ D8 A! Z# P- Y; s
    <meta http-equiv="X-UA-Compatible" content="ie=edge">% A2 H8 G' \' \' _- Y) L
    <title>Document</title>+ G5 p; O; ^* U
    <style># t3 U5 B" u+ C8 P" w
        * {! b+ q( v" r; L/ R& `: v
            font-size: 10px;1 i: t0 |( L( h" B5 ]
            line-height: 24px;
: ]3 b! G$ ^# c$ P8 T/ n        }
8 @& ?+ E; I- s* b8 C  t    </style>
5 z! k4 i% W" V5 n+ f8 T</head>) T6 f: d5 e7 \# C; x% c* A2 _& H
5 p4 \* I+ J+ v0 r0 P
<body>
# N* k% E1 J% |  Y+ x    //this is for the select test# y" n* A  t4 J! b$ Q" K
    <form id='myForm' action="submit" method="GET">
* h! H! ~" u) r0 \6 G& v& E        <input type="text" id="inpuTChange" />
- i' [  y" P1 O! Z5 U4 R  X        <select name="selectFruits" id="mySelect">
. ?/ `8 r( E2 i            <option value="Orange1">Orange</option>
/ S) Z2 K) a$ S* x; R            <option value="Apple2">Apple</option>' M( @0 X; u& w* Q" g
            <option value="Banana3">Banana</option>
; h& q- o7 ~7 N. T" f$ U/ h        </select>5 Q; N% x2 B/ b) v+ u
        <br>/ E; h9 A9 C6 o  P& [
        <input type="button" value="disable">, J$ L" B9 C4 W& p4 c
        <input type="button" value="Able">
" Y; o+ N# G, S& s        <input type="button" value="getValues">
7 U7 u5 |) ?! J" s2 f. w        <input type="button" value="editValues">  t' }, W( H2 j; z1 W& B
        <input type="button" value="addValues">
/ t- w0 I3 |( Z, p6 G5 L        <input type="button" value="removeValues">
  @0 G$ s' d: O; P! f% T& V        <br>% y6 {7 x3 F- K; o5 G! h% d1 a5 q
# I* n8 ?& N8 r4 }
    </form>/ p% e5 x4 a; m5 Q0 K

; g. r* |7 `5 G3 k    <p id="demoInput"></p>0 z, i3 }1 f7 y; }
( O( R: \5 Z" R( @9 T* P% Z; |+ B4 U

( S" q7 Z& |/ H7 x$ b; S    <script>0 b4 k( L* B2 b. E) h' v+ R
        function disableFunc() {8 c8 B! {2 l7 A: L% n
            document.getElementById('mySelect').disabled = true9 t( D5 k) q) u2 B3 e
        }7 `9 C! w" U. V) u( J2 G
        function ableFunc() {- u6 y0 r) I! N/ ^4 @( i
            document.getElementById('mySelect').disabled = false. ?# c* ^% o2 m6 s, ?: C' Q
        }
' X6 |3 N- `! F& e        function getValues() {
/ ~% ^& H. }, g7 K            var text = '<ul>'3 k% U  Z9 C: G
            var x = document.getElementById('mySelect'): G) s+ j6 g1 }9 c0 P$ v# A
            for (var i = 0; i < x.length; i++) {, x2 j+ f4 A  Q5 L
                text += '<li>' + x.text + '</li>'
0 V; H. u7 K* k; [5 M            }8 c1 N0 R9 {1 x9 n* w/ u2 ]
            text += '</ul>': Z+ e. s, Q2 n! E
            document.getElementById('demoInput').innerHTML = text  S4 F. w; B2 r% Y7 D
        }$ ~8 k7 e, j) G3 j7 s0 U: `% q
( C. N9 G" S4 r& Y
        function editValue() {
" k, I& x# Q( S! x            var mySelected = document.getElementById('mySelect')
0 S" S1 V& R$ f+ G5 |            var selectedIndex = mySelected.selectedIndex
1 e6 U" u# l' o% T            mySelected[selectedIndex].text = document.getElementById('inputChange').value
: D" C; E/ A' P" ~0 \; P        }0 |( c) [# y; t& u5 b- e
7 z8 N# t8 O7 r. u* p
        function removeValue() {
$ G. M$ s! _1 s* N2 m1 }; H% v            var myselect = document.getElementById('mySelect')
  B' i: E9 c( P* f' F7 E0 c            var selectedIndex = myselect.selectedIndex1 x& ~, r9 A4 I  M/ h+ h
            myselect.remove(selectedIndex)
5 V8 ^! p! r3 q6 T: ^        }
  s0 [% f) O4 h7 d        function addValue() {: |4 X$ ~; z; ?
            var myselect = document.getElementById('mySelect')
8 f& X* [& `1 E# K6 L            var addvalue = document.getElementById('inputChange').value' t& }% q- ]3 P9 X
            myselect.options.add(new Option(addvalue,"value"))
- B# U" B2 t. c) B        }
# b  o- _# ~4 s6 }: E) H  Y/ \    </script>3 n. @4 }; y0 s
</body>
% g( T/ h4 a: e# N3 w( P0 G1 f
</html>[/mw_shl_code]0 `0 l* j6 `: S( I
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了