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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x

- @3 B, |( d  w& X- q3 S( f* n6 D$ ~8 y+ {2 |
JS 操作 Select相关功能测试: s' d8 M- V7 \
. }6 x: ?7 F# ?. d( c
[mw_shl_code=html,true]<html lang="en">' O! M( m0 \/ s
. u7 T7 P, e$ d6 L7 s: U, b
<head>+ t% g: f$ N0 @! R8 V
    <meta charset="UTF-8">
$ \2 L2 L$ P) I! [* m    <meta name="viewport" content="width=device-width, initial-scale=1.0">
. m) H+ i4 T7 T  V: `% f    <meta http-equiv="X-UA-Compatible" content="ie=edge">0 ~' ?/ ]/ F7 W+ E- s
    <title>Document</title>
1 h, M) N. ^) g$ A' a6 x2 o    <style>
4 V6 V  V; V) F& X7 n        * {
+ Q# R$ m5 ~* i' R+ S) [- i$ _  y9 L            font-size: 10px;1 P' M; f# F" R  \7 x
            line-height: 24px;
/ f2 @# w. Y, k4 O8 o' u+ f        }
, ~) T$ z7 h$ ~! c! D    </style>
9 H1 e; f+ {, W# A" ]5 b5 A; V</head>
5 Q8 |1 L1 o" {0 m1 ~2 Y/ B9 T: v/ C1 m1 T3 ]( ~
<body>4 o9 l8 D  X# r- B
    //this is for the select test, ~7 X: Y, R+ ]3 ]$ \6 b/ T8 T
    <form id='myForm' action="submit" method="GET">
, E* r+ j2 g% j4 q        <input type="text" id="inpuTChange" />
* t2 `+ r, `& c( `6 R9 M. Q* P        <select name="selectFruits" id="mySelect">
, O4 X9 W. D, m% M8 e            <option value="Orange1">Orange</option>
8 L, F/ K  m6 Z4 ~  f8 i5 ^            <option value="Apple2">Apple</option>
/ T: `; }; Z+ S& g5 L, K            <option value="Banana3">Banana</option>
- d5 c& E9 y6 K0 i5 k# {* ?        </select>- b/ C, J" D3 _: J% {0 C6 G
        <br>
6 [' j, Y( B2 W  ?( S. H* ^        <input type="button" value="disable">2 Q) d  V4 P  @1 f% ?
        <input type="button" value="Able">4 n" ^; B! }( T5 D
        <input type="button" value="getValues">
5 s8 U4 u& L. k+ u" H/ j        <input type="button" value="editValues">
# [- W- u: s( z5 r        <input type="button" value="addValues">3 c! X1 x* H* P4 R
        <input type="button" value="removeValues">
8 t# L5 I$ b4 f* q  S; s, l# ^        <br>9 i2 t* m. _0 X
+ s  x# v# Q& p% t: V3 f7 L0 R
    </form>
0 |0 z3 z; N$ T' C7 [0 ^( k% Q4 x8 d% O0 x
    <p id="demoInput"></p>
7 X5 q; ]0 _$ i( a: R$ [; Z8 J! Z; L
7 J! O) Z6 G! Y: w/ k4 H7 p$ n2 F
    <script>
7 M- x8 u5 ^* J0 ?2 z; |        function disableFunc() {0 l: P$ T4 d( D% n1 j- V9 I
            document.getElementById('mySelect').disabled = true
; ~# J- H/ W' R        }
# H  e8 A3 r- x6 G6 K+ |        function ableFunc() {
0 d, @% N& A" [4 |            document.getElementById('mySelect').disabled = false: M7 `  e4 f9 f: \2 M
        }% I, C8 a. t$ @2 A# o
        function getValues() {' W+ c3 ^0 A0 n
            var text = '<ul>'2 N) c) O) ?* s; j# H# o  |
            var x = document.getElementById('mySelect')9 M* \* F: N0 ^5 I4 @% \0 W
            for (var i = 0; i < x.length; i++) {
3 f; M, }7 S2 U. t# ]                text += '<li>' + x.text + '</li>'# H' g8 T1 g2 S3 R# j, `0 ?6 H
            }
0 Y1 S$ K- c5 t0 _* b0 _            text += '</ul>'# \0 p- P) K: u$ y& X
            document.getElementById('demoInput').innerHTML = text
4 U' ?) L8 z& V$ i        }
2 J# U4 m7 g0 ~! Z2 f1 ]7 e
0 `- E7 B7 }# p        function editValue() {: R! T7 y& x1 I$ ^+ Z
            var mySelected = document.getElementById('mySelect')
, t" |3 X6 A, [- V9 U! C1 A            var selectedIndex = mySelected.selectedIndex
; L+ Y; O- w/ N' c% H            mySelected[selectedIndex].text = document.getElementById('inputChange').value
: O4 B: C$ V8 x. ^. c  G/ t        }
' w6 a, e( }" @) l/ r  J
4 J0 g1 m( S% o' h3 Z) P        function removeValue() {
2 s# z& F+ u7 M# P& S" X, G2 `# _            var myselect = document.getElementById('mySelect')
' G+ R$ o; Z6 z8 |  t0 w4 K) q$ x            var selectedIndex = myselect.selectedIndex" L1 k/ q3 {& T+ s9 I
            myselect.remove(selectedIndex)
6 J$ `" l, K1 r- C& x  k        }5 `* T$ f% r( _9 }% \( v3 C
        function addValue() {! W, i! K' T& f
            var myselect = document.getElementById('mySelect')  [3 I+ [6 u8 |1 H# V  A
            var addvalue = document.getElementById('inputChange').value+ y$ R& Z, s8 j8 h7 A
            myselect.options.add(new Option(addvalue,"value"))- o8 e0 j) e; S7 a
        }% C& t7 [: h) ?5 [9 s3 [; D
    </script># S1 c; }- k6 O
</body>8 O  }# t" s/ c/ `. x% a
% N+ b5 o8 }  z
</html>[/mw_shl_code]* u" d8 w% v- 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二次开发专题模块培训报名开始啦

    我知道了