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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x

! k+ P, |9 H- P/ \% ]) D$ D
/ w! j' E( ]4 c+ SJS 操作 Select相关功能测试/ m# I2 u- W" N0 I: D, G2 B

& X2 f3 _( ~2 W6 c[mw_shl_code=html,true]<html lang="en">
+ O! h+ }5 Z3 N; d; M  `
: `# `' w( K! G, i: P2 {! i! [" }<head>
$ B4 _- H: O# M# O* o    <meta charset="UTF-8">
: i/ q0 V- B% I* w8 e7 ^. U7 e    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 [, j2 t, D# K) e    <meta http-equiv="X-UA-Compatible" content="ie=edge">
0 Y1 H: l. ?4 x3 a5 U    <title>Document</title>
0 ~) X3 a" Y/ J) K2 P7 P# L" Z) _2 @    <style>
: z0 Y7 e0 @( f. I& U9 s5 F% p: S        * {
3 ]0 k2 R' `. k1 v3 v% t            font-size: 10px;
& |, M. b2 ~9 V- l            line-height: 24px;
7 \2 f* u' o" w$ C# ~& X! `        }: a3 l7 v) o2 |& v: r
    </style>
0 W9 G% x9 V9 ]/ f</head>" O: R4 D9 c! N# l" k

$ ?7 K. y3 y% N, n. ?+ e# c<body>
; M& Q) x- r3 q, y) K    //this is for the select test
: J$ ?* j8 n4 h$ }7 r9 M    <form id='myForm' action="submit" method="GET">% K: c! H( ?9 {* V3 F# M1 R9 }8 [5 ]
        <input type="text" id="inpuTChange" />
7 A& t, o! ?4 M        <select name="selectFruits" id="mySelect"># D3 r2 B+ Z2 x' r0 Y
            <option value="Orange1">Orange</option>
( G5 z2 n/ A6 r3 B7 ]            <option value="Apple2">Apple</option>
+ E( T; d3 g0 ^) n6 U# [  ~) q' G            <option value="Banana3">Banana</option>  O' J' [# m4 A$ S' E: e
        </select>$ ~7 {. a  i4 p: L
        <br>  T( K% f( |1 ^! ^/ ?" L' W+ j: D
        <input type="button" value="disable">
9 c6 Q: x4 E! H7 R        <input type="button" value="Able">
$ i# I0 m, x; g: M8 Q7 R, a        <input type="button" value="getValues">
( g& Y  }, ]- V* h4 _        <input type="button" value="editValues">
% S) X7 p# Y; h6 H- }        <input type="button" value="addValues">
, \* r! A4 o) J  y. X  H& o        <input type="button" value="removeValues">
( `* ]7 S0 c4 g  X5 L" L- f        <br>
& x4 j8 V$ y5 [! o! T5 t0 s
. d/ ?* g; ~. W5 S' [    </form>
" U6 Z2 I  j5 P6 H9 T2 X% q1 p/ j9 s0 H
    <p id="demoInput"></p>
6 z/ r+ P7 Q# U1 n% P9 U9 i+ v) V# f  v

; L: i9 u: O1 r( J2 C! I    <script>0 f3 r. w9 Z' `
        function disableFunc() {
1 r" o) w+ @# R            document.getElementById('mySelect').disabled = true
  F/ ?# [* `7 L6 _* E. e        }
) Y& u8 K7 G2 P# Q) r+ [3 ?: ^3 N        function ableFunc() {
. ?# V+ ]7 ?( u* |+ u+ k            document.getElementById('mySelect').disabled = false7 I) t* \6 U5 Z* G% T7 ?
        }
* ]7 m0 O1 q1 b0 l5 Y        function getValues() {% T# c- G8 }2 l* _  T
            var text = '<ul>'. b0 W, [  V) q( I
            var x = document.getElementById('mySelect')0 u2 h) T$ ]- Y; v: _2 X* t# @
            for (var i = 0; i < x.length; i++) {
+ U2 @; Z9 U) x/ d                text += '<li>' + x.text + '</li>'
" }, @3 j. v+ w            }+ \1 X" O& z8 K+ A6 I' ^: Y
            text += '</ul>'9 h  A, i& B# z; {. @% h
            document.getElementById('demoInput').innerHTML = text
. H+ x/ K! N0 X        }
. P6 z/ X2 h% e. K( n; \& \' t) |( T
        function editValue() {$ U7 y: X% b0 F# r- U9 D; u- h5 L
            var mySelected = document.getElementById('mySelect')
3 N, o* y7 E# M4 ]- w- J! G0 b2 [            var selectedIndex = mySelected.selectedIndex% F% W% P$ i, m2 n( y3 W" c0 h  v& \
            mySelected[selectedIndex].text = document.getElementById('inputChange').value' S, Z3 H0 v4 n: \
        }
8 a" c' T- a/ q0 I2 {
$ N( @4 J+ D" `# h6 L3 [# ~        function removeValue() {& w9 x; K- h- Q( c+ b& L# R
            var myselect = document.getElementById('mySelect')3 W6 _/ a9 l* @/ K. K- R
            var selectedIndex = myselect.selectedIndex: t  R+ y0 ~- Z2 ^! f5 m
            myselect.remove(selectedIndex)
& o, _7 w1 S0 \( e        }
0 X) S9 ~) X. t% g" h9 O        function addValue() {
9 x: q- t: h6 k9 N: L% w            var myselect = document.getElementById('mySelect')& u4 @) N3 H" S& l& E3 J
            var addvalue = document.getElementById('inputChange').value- o& ?2 C* n- g% z
            myselect.options.add(new Option(addvalue,"value"))  h3 S& ?* G" {9 h0 b
        }
% p4 u1 g: d. W1 z0 w* \: g    </script>
! U5 L, D/ y+ `3 e7 z</body>% `$ N' N, g) H% v( j' h

) L$ @# Q. g$ j0 `+ l6 K</html>[/mw_shl_code]
6 K5 w  u, N. j8 v
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了