Js 下拉框新建窗口
2012-08-10 01:08 youxin 阅读(322) 评论(0) 编辑 收藏 举报<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.
参考：
