美文网首页
设置水果

设置水果

作者: Yuann | 来源:发表于2017-09-21 21:39 被阅读0次
    设置水果.jpg
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
        <button>识别鲤鱼</button><br><br>
        <button>去掉</button><br><br>
        <select id="sel" multiple>
            <option value="0">香蕉</option>
            <option value="1">苹果</option>
            <option value="2" selected="">鲤鱼</option>
            <option value="3">鸭梨</option>
        </select>
    
        <script>
            //需求:点击识别水产,立刻把option对应的鲤鱼选择的属性设置为selected;
            //步骤:
            //1.获取事件源和相关元素
            //2.绑定事件
            //3.书写事件驱动程序
    
            //1.获取事件源和相关元素
            var btn1 = document.getElementsByTagName("button")[0];
            var btn2 = document.getElementsByTagName("button")[1];
            var sel = document.getElementById("sel");
            var optArr = sel.getElementsByTagName("option");
            //2.绑定事件
    //        btn1.onclick = function () {
    //            //3.书写事件驱动程序
    //            optArr[2].selected = true;
    //        }
    //
    //        btn2.onclick = function () {
    //            //3.书写事件驱动程序
    //            optArr[2].selected = false;
    //            optArr[3].selected = true;
    //        }
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:设置水果

          本文链接:https://www.haomeiwen.com/subject/ysetextx.html