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

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

[复制链接]

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

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

admin 楼主

2019-11-4 20:15:32

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

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

x

) k+ f$ m  _" k$ e) ?' k9 ]/ ~& x; ^
# e; r7 W& g0 Q4 Z4 SJS 操作 Select相关功能测试6 \2 P  h, |' Z+ s1 f

  u) N' {+ ~% V. O[mw_shl_code=html,true]<html lang="en">+ W$ P* C: W! H4 }2 V6 h+ G
( u  Q+ N0 C2 p; `* A
<head>5 }+ l* f2 [: j' w. @3 S% S) r- Y+ S
    <meta charset="UTF-8">4 l$ K+ H# M1 o! L8 @4 a6 [
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
3 S: b: Q. t' S, U5 x2 k1 e! @! ?    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9 t6 r! i' W9 B    <title>Document</title>9 P. ^- ^0 P2 D9 ]8 v" P
    <style>7 ]! B; L8 B& t2 K3 n3 H* Y
        * {
/ Z' X/ H1 O! [. D; i6 F            font-size: 10px;; B) G* z) v+ |0 H, j  J3 f
            line-height: 24px;) o! |# i$ ^+ a: E. A; B
        }: I$ R# J# j  z9 {, D5 J' E: R
    </style>2 j% q$ d  n3 [0 `! d, v
</head>
) B5 }3 u" n2 c* J2 T9 J. e+ [' F" I) `
<body>: R  V; i* J5 _. Z' s5 V
    //this is for the select test' h, U9 }* [( J9 l1 \, S- U# Q
    <form id='myForm' action="submit" method="GET">
- Q9 U* O* Q5 l: b        <input type="text" id="inpuTChange" />
1 r; O" {6 `# W, E3 G  @% T, l        <select name="selectFruits" id="mySelect">' }" w2 J. w% v/ s. @% @0 B
            <option value="Orange1">Orange</option>. [; L3 x/ }" M6 d% s4 h+ y" c
            <option value="Apple2">Apple</option>6 y4 a9 w% t1 S' m$ c5 X2 ?6 ?
            <option value="Banana3">Banana</option>
; G, {3 l) s0 ?& T7 D- I        </select>
/ Y- S* h# o2 a( @6 ]* t" _        <br>
( A0 l" t( I  C7 T        <input type="button" value="disable">1 J- q0 b! Y+ S' z: L! J. T, t& N
        <input type="button" value="Able">" T. p% x/ i/ t0 w+ U6 o
        <input type="button" value="getValues">
: S* @- V4 q( I" W; @% @4 P        <input type="button" value="editValues">
8 v! k; i) [6 X+ x2 e6 A: V        <input type="button" value="addValues">
2 M" U( P( A% V9 {1 N+ g2 V- W6 ?        <input type="button" value="removeValues">8 w5 _8 Z2 D" s
        <br>
3 `% G5 N9 L) D% E
: h; {7 f- O- R5 m+ I; N    </form>- G1 j) G- h5 I- {8 d

9 S. L2 u8 A* R" w! D# l    <p id="demoInput"></p>
6 x$ |  K' G. Y; A* r/ @& h. t- ?! f7 d& S- S
9 Y% ^* C/ S4 b1 j7 \* B  c7 @
    <script>
2 ^' v  |7 T/ J. N- n# e        function disableFunc() {
( q, @% p! e+ c, y2 v            document.getElementById('mySelect').disabled = true
, [- b( w9 G# m* K( b        }
7 p+ P9 D* U+ d  L( T4 G* _& b* H        function ableFunc() {
. U3 G, R7 E0 k, O8 [, @+ {            document.getElementById('mySelect').disabled = false
% X9 b; @1 m" E" b        }7 z8 \* c7 f! n5 q4 v7 {& r$ W6 `
        function getValues() {
  v% b- F3 p- a% ^4 t7 W/ w            var text = '<ul>'. M5 f. a2 E+ t- w1 B$ b2 u
            var x = document.getElementById('mySelect')
& E& K. W" D$ E( ?: `) U            for (var i = 0; i < x.length; i++) {, h! x2 P0 `8 Y: x! C
                text += '<li>' + x.text + '</li>'
( n0 d6 s8 Q$ y/ p! J/ d            }7 Y! z- T! u+ w2 [- K2 S9 ?3 }+ e
            text += '</ul>'. V2 ^5 O3 v/ U9 P* S
            document.getElementById('demoInput').innerHTML = text  {& @/ J: j( o* Z; _. i
        }
3 m# y* i1 e& r9 B: w, b& f
! {  A* _2 S0 B( B        function editValue() {
$ i% E2 J+ T" O  v6 j9 c( ?* W            var mySelected = document.getElementById('mySelect')* x& P& U* e3 i0 }3 P( l' P
            var selectedIndex = mySelected.selectedIndex
! r; z# H% ]2 b            mySelected[selectedIndex].text = document.getElementById('inputChange').value
  O$ P7 F; j5 Y3 P4 N        }
) B/ B4 n+ {9 @+ _9 a3 E' T8 P
% Z' p, z2 S9 d        function removeValue() {, d4 M4 k5 B9 U' N6 O3 b: ?
            var myselect = document.getElementById('mySelect')
" u+ a  ]5 g; j' r% f            var selectedIndex = myselect.selectedIndex
" `: ]7 F. `% j6 Y' d) ^3 u            myselect.remove(selectedIndex)( H# C2 @* P: H
        }, h/ T% H/ M( f% N) J$ i
        function addValue() {0 [$ b. F  E# z' T- S
            var myselect = document.getElementById('mySelect')
4 w& g! T, U5 @            var addvalue = document.getElementById('inputChange').value! {  g8 q. F* q2 U
            myselect.options.add(new Option(addvalue,"value"))6 a8 q( d' r5 x% a: h. f
        }
8 a5 b; x7 @" ~' I2 g9 v    </script>5 X3 H( ]- z3 l0 s" l
</body>
& D2 g4 M# L) q- i4 ^( C0 G
# V7 i( A+ w9 |' E5 \% T</html>[/mw_shl_code]& {/ Q1 k. q9 [+ _/ r
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了