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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x

# Y. C+ q, U# S! Y- J8 s) o8 ]8 ~
" S/ r1 @/ g3 A5 b8 ^% BJS 操作 Select相关功能测试
: n" u: a( m' ^7 E3 {/ e2 T" \# x& @
[mw_shl_code=html,true]<html lang="en">, F; ?4 h6 R1 {- m4 M

/ r1 I( R, z8 `! r<head>4 E/ W  b0 k8 ^
    <meta charset="UTF-8">
( L9 V& y; j8 l2 {    <meta name="viewport" content="width=device-width, initial-scale=1.0">* F  I! D+ c9 g1 Q% u, Z
    <meta http-equiv="X-UA-Compatible" content="ie=edge">- p! f2 H; s1 W  ]5 B+ K2 T5 M
    <title>Document</title>
. d, ]$ |7 R4 J$ x    <style>
# T* N# V3 t3 u2 [8 W( n$ _/ `        * {
. e* ]& y7 k4 _: B. z" ?, R+ b            font-size: 10px;" `7 D8 S4 B/ w: m; Z# w
            line-height: 24px;
+ `4 \! |% C0 G2 }        }3 o0 y1 S( D) I: C" w5 o2 \4 l
    </style>
) f* Q( O: ~5 e- k. u/ }</head>3 [" d8 w% D1 ^5 ~8 s8 M( s1 Z
/ T2 T) @) A( Y! F- Y2 f
<body>% v; N) W" w8 M; M5 F+ Y
    //this is for the select test
- {7 V0 x, [6 n; U0 Y8 f    <form id='myForm' action="submit" method="GET">
) \* j; a+ f  D6 j! t        <input type="text" id="inpuTChange" />
1 ~4 c9 x# f0 k% E/ ~- x  \  j+ ^# e        <select name="selectFruits" id="mySelect">
# I& u, d  E/ Y! M) C            <option value="Orange1">Orange</option>
: a" {8 u6 m6 o, @6 c; r5 w* E            <option value="Apple2">Apple</option>6 {: P% U* E# P! O3 v! l2 |
            <option value="Banana3">Banana</option>) c6 a& X' r, H  g: c
        </select>
. U6 [# V/ d2 T- i( w; J' F        <br>  A6 f/ J& M- l  h# K
        <input type="button" value="disable">! N/ A0 w. M3 ^$ Q% s$ A) w/ S
        <input type="button" value="Able">
# v4 `% C2 u9 O( D        <input type="button" value="getValues">
, p/ J. Y' O7 j( F- m        <input type="button" value="editValues">
6 n5 u2 L4 a& e/ t, f! |        <input type="button" value="addValues">
3 r! l* X; ], b: n' B2 C        <input type="button" value="removeValues">
- V+ F: V1 o3 H5 B        <br>" k/ i4 J; A9 N* N

! S. Q- r( G0 R3 z9 Q6 _: ~    </form>
( p5 q' ]. m9 A# J) T  k, x/ e. s3 p# r& R+ g& p# e
    <p id="demoInput"></p>- G0 g8 h$ M& _" T( N$ }9 A2 A% f6 k
0 Z% S" j4 K, C7 K+ h* \6 S

5 K5 C5 V, m: _% ?: [    <script>: L. D. h3 r  h6 }5 M8 Z' }
        function disableFunc() {
$ `  p5 m+ h" o            document.getElementById('mySelect').disabled = true
$ O% Q# \  z  v1 p& Q# ]  C        }; G1 i' R  \( \5 A* u
        function ableFunc() {
  U5 F. N. h$ M3 F/ j8 h6 c            document.getElementById('mySelect').disabled = false
$ x6 I, e- b5 j8 _. f        }( \" l' N" w* Q
        function getValues() {( u  Y- t/ I* v- [0 i  H
            var text = '<ul>'
4 p  n/ z, R2 N' K9 y( q7 l            var x = document.getElementById('mySelect')
4 W9 U$ J" ?! U6 @$ F& O            for (var i = 0; i < x.length; i++) {
& X% V8 |9 ^' J( ~) t                text += '<li>' + x.text + '</li>'
3 N' }" ]3 m: ^( B! U: e            }
4 r" O0 x5 n5 N# F% B% W            text += '</ul>'& P/ L3 a& z$ a- m8 V* F& |
            document.getElementById('demoInput').innerHTML = text
, H5 \& g  Z: E3 p& K8 X7 b        }
8 b- E$ r4 o& l# C7 q9 }) d, w4 i4 W  T
        function editValue() {
0 m& r* N6 {4 P/ H8 G6 F            var mySelected = document.getElementById('mySelect')
' _3 L) g& N1 s$ E5 f1 @            var selectedIndex = mySelected.selectedIndex
0 J! _5 _$ b: [6 n. F            mySelected[selectedIndex].text = document.getElementById('inputChange').value
! \% q" q3 e5 Y3 u        }
/ t4 c, q1 E5 Z3 U6 H8 D4 _/ P0 P, L- L4 I& I* i8 H( h  j! I( o7 S
        function removeValue() {
# E+ v( t( w' [9 e5 I; [% I6 [3 Y            var myselect = document.getElementById('mySelect')( G* r+ J) E" ?) V+ G
            var selectedIndex = myselect.selectedIndex; G  a$ c9 F" k# g
            myselect.remove(selectedIndex)1 \3 _# H' y- a+ V
        }8 [- F" c  y6 g2 b' K
        function addValue() {
4 S4 N" \. {+ s            var myselect = document.getElementById('mySelect')  O4 f2 O" S& ~- |3 \: N+ N
            var addvalue = document.getElementById('inputChange').value
9 p3 Z3 n4 V7 S0 D: ?. j/ Z            myselect.options.add(new Option(addvalue,"value"))6 K# F% T/ H  H/ x2 s2 Z; V5 J# A
        }
( W8 m. o! \% r3 X/ e9 G  m    </script>$ B; s, V/ i" e( [7 [6 U7 r/ d
</body>
+ ]4 b- `$ u4 c9 ^4 V8 S% m2 H9 f; W: h, t( a$ q
</html>[/mw_shl_code]
' |" A( a+ {/ G1 q
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了