zoukankan      html  css  js  c++  java
  • Js 下拉框新建窗口

    <body>
    <form id="aform">
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>
     <script type="text/javascript">
    var selectmenu=document.getElementById("mymenu");
    selectmenu.onchange=function(){ //run some code when "onchange" event fires
     var chosenoption=this.options[this.selectedIndex];//this refers to "selectmenu"
     if (chosenoption.value!="nothing"){
      window.open(chosenoption.value, "", ""); //open target site (based on option's value attr) in new window
     }
    };
    </script>
    </body>

    Form SELECT elements (<select>) within your form can be accessed and manipulated in JavaScript via the corresponding Select object. To access a SELECT element in JavaScript, use the syntax:

    document.myform.selectname //where myform and selectname are names of your form/element.
    document.myform.elements[i] //where i is the position of the select element within form
    document.getElementById("selectid") //where "selectid" is the ID of the SELECT element on the page

    Then, the options[] property of SELECT returns as a HTMLCollection every OPTION, for example:

    document.getElementById("myselect").options[0] //accesses first option via options[]
    document.getElementById("myselect").options[3] //accesses 4th option via options[]

    Finally, each individual OPTION within SELECT is represented in JavaScript as a corresponding option object. This gives you access to an OPTION's actual value or text, among other things. For example:

    document.getElementById("myselect").options[0].value //accesses value attribute of 1st option
    document.getElementById("myselect").options[3].text //accesses text of 1st option

    In summary, there is the select object in JavaScript to access a SELECT element, select.options[] property that contains each individual OPTION as a HTMLCollection, and finally, theoption object that represents each OPTION itself in JavaScript.

    参考:

    http://www.javascriptkit.com/jsref/select.shtml

  • 相关阅读:
    (转)如何搭建一个vue项目
    vue项目设置自动打开浏览器
    vue项目关闭代码校验
    前端面试知识点
    图片瀑布流,so easy!
    详细梳理ajax跨域4种解决方案
    css实现内容不相同的左右两个div等高
    简单了解css3轮廓outline
    vue事件监听机制
    table-layout:fixed
  • 原文地址:https://www.cnblogs.com/youxin/p/2631120.html
Copyright © 2011-2022 走看看