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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x
) z4 n6 D& {& O6 q" r8 |; P

( j4 H% L% ]. Z' N( hJS 操作 Select相关功能测试  b; G: d' y" h) E! f

1 q' E! _- W8 y[mw_shl_code=html,true]<html lang="en">) d% O5 j5 V4 A6 \$ d, p3 H- ^  c6 J

7 d7 X% b/ k' o<head>
+ q; S+ [- Y* H$ T3 v6 [    <meta charset="UTF-8">
; [) }) R/ l6 c* N  ^4 L: y    <meta name="viewport" content="width=device-width, initial-scale=1.0">
( x) h2 ?4 t1 q3 W    <meta http-equiv="X-UA-Compatible" content="ie=edge">" J2 _  p$ |  a3 c
    <title>Document</title># H0 L3 A3 C- [2 }9 P" ?
    <style>
* `3 ^: ?/ L& r, Q0 A6 o        * {
8 R; `5 M4 W: @$ b1 x4 a. Z            font-size: 10px;
# G! Z$ @8 x. X            line-height: 24px;
5 X) e$ a6 X8 _/ r) P0 s        }9 @1 M. f; x+ ]' L: j" `9 j( H
    </style>- o6 j/ Q4 A5 l0 O4 _
</head>
' B9 ]* M( B2 m; q2 ?; l& p! s4 d
<body>& p% T) u. F* x6 |4 P% Q; C
    //this is for the select test
' n; ?# q3 q8 M" ^5 ]; n    <form id='myForm' action="submit" method="GET">+ s* X7 C4 z. d8 J7 m! z
        <input type="text" id="inpuTChange" />1 a. K1 h' J( e) h, @" F" m
        <select name="selectFruits" id="mySelect">
5 B% m: P3 [# o" n( x& C            <option value="Orange1">Orange</option>
! }5 y' w4 g. Y6 o            <option value="Apple2">Apple</option># O1 N$ |0 Y2 t. F. o
            <option value="Banana3">Banana</option>, k$ X1 F( @# ]% Q, z% O
        </select>, G4 [5 M2 V; N$ D& A  \
        <br>$ t: p# }& y# O' |7 O1 {+ \
        <input type="button" value="disable">
* v4 ~7 N( F" g+ B) A+ a        <input type="button" value="Able">
. k5 g+ U* a0 g2 S- n/ P. k8 g        <input type="button" value="getValues">9 R9 P% Z6 Z% [5 B& w; ~) f
        <input type="button" value="editValues">" J$ A4 M9 k' `0 ~3 M( B
        <input type="button" value="addValues">
6 @6 S: h. T( S% ?% o7 e        <input type="button" value="removeValues">8 x6 u! ~- Q  p3 K
        <br>  K9 j. n. D  {; F, X" y

2 I$ ^  `+ O- s- ]) S: U' m. J9 I    </form>  c' Z, \0 K& t) ?  _* O, I

" B! Y, K( a' f% l- r5 G- |    <p id="demoInput"></p>
5 i& y9 q, G' d% F% P8 U. c( J2 \  e( {! ], \

+ ~% g# Z5 O  X4 U, J, R    <script>
( n" ?( U. S* U* {( e. Q        function disableFunc() {' Z5 D! X. @1 |. C1 p$ L
            document.getElementById('mySelect').disabled = true0 n: s4 F& Z5 Y, Q
        }
6 ]' t3 F1 N) }7 F, m        function ableFunc() {
) b! a" E( ]8 x, t, N, f' P            document.getElementById('mySelect').disabled = false! C; C; E& M' S9 Y* i; b
        }  T" r( H! O% O  X) H( U
        function getValues() {
: m) Q0 g/ h: X* Z/ t+ z            var text = '<ul>'# h( ]! W# a5 G( ~4 O
            var x = document.getElementById('mySelect')- T& S! i" _, V+ N; u
            for (var i = 0; i < x.length; i++) {- e3 O! @: t9 j
                text += '<li>' + x.text + '</li>'0 P8 o. A  G) ?% E$ u4 O8 [; ^, d* t
            }  x/ |8 K9 R' d! ~
            text += '</ul>'5 B3 T  }8 A( U# t. y( Q) B' r
            document.getElementById('demoInput').innerHTML = text8 K" l6 H. i( Y/ k( _! t
        }& h7 V/ h! r! O" T% I

+ Q0 y1 r( j5 c7 Y5 J        function editValue() {
! A6 O7 Q9 J* i" _            var mySelected = document.getElementById('mySelect')# n* g3 w" z1 Q  x
            var selectedIndex = mySelected.selectedIndex# l# V; q0 ]: x2 g7 o
            mySelected[selectedIndex].text = document.getElementById('inputChange').value$ |3 O$ v' A7 c( v+ t! G+ I
        }
& m5 M0 a$ B0 o( _- `
- N& ?2 ]5 N7 I4 g) N        function removeValue() {
3 w, ^9 [7 m% c8 K& q            var myselect = document.getElementById('mySelect')  C0 w! [; D" S
            var selectedIndex = myselect.selectedIndex( m) r: x1 ^/ H/ F
            myselect.remove(selectedIndex)
! s% ^, @/ V+ m- U* ^        }
( u# P' I1 O  z! e6 ]' a2 x        function addValue() {
- Z$ p3 S/ X$ ?/ s; D7 g            var myselect = document.getElementById('mySelect')
0 Z# n6 s, O9 b8 ?7 j/ Q& C5 S            var addvalue = document.getElementById('inputChange').value' i3 m. S% k1 o
            myselect.options.add(new Option(addvalue,"value"))
, w3 V& `- w0 f! o7 v, p        }
- V' Y0 a8 }# ]& x! V    </script>
4 L0 C8 V: ~/ s) T' l, |</body>7 L5 H2 u( U% R9 e- K3 ^

% ?6 V3 F7 F" b4 N. g" q7 C4 ~% G1 q) I</html>[/mw_shl_code]
! R( ?- @4 O7 z# X+ l8 R1 z4 D! I+ b
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了