码迷,mamicode.com
首页 > 其他好文 > 详细

详细的<select>下拉列表详解

时间:2017-06-06 13:04:05      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:link   它的   rem   属性   title   改变   服务   style   lin   

我们使用表单下拉列表选择数据,如省、市、县、年、月等数据,我们即可使用下拉菜单表单进行设置。
select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值(用于数据的传值)

select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。

<select>标签的使用技巧总结:

 

1、动态创建select
function
createSelect () { var mySelect = document.createElement("select"); mySelect.id = "mySelect"; docuemnt.body.appendChild(mySelect); }
2、添加
一个选项 function addOption () { var obj = document.getElementById("mySelect"); obj.add(new Option("文本", "值")) } 3、删除所有的option obj.options.length = 0; 4、获取选中的索引 var index = obj.selectedIndex; 删除 obj.options.remove(index); 获取value值:obj.options[index].value; 获取文本的值: obj.options[index].text; 5、删除select var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); 6、让html里面的select无法选择? 放一个option或者给option加上 disable = "disabled"; 7、给html select 标签加链接的方法: a、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select加链接</title> </head> <body> <script type="text/javascript"> function mbar(sobj) { var docurl = sobj.options[sobj.selectedIndex].value; if (docurl !=‘‘) { open(docurl, ‘_blank‘); sobj.selectedIndex = 0; sobj.blur();//失去焦点 } } </script> <select name="change_select" id="change_select" onchange=mbar(this)> <option value="http://www.root.com/test/exercise/s1.html">我的本地项目</option> <option value="https://www.baidu.com/?tn=47018152_dg">百度</option> <option value="http://www.imooc.com/u/1891279">慕课网课程</option> <option value="http://fanyi.baidu.com/#en/zh/restore">翻译</option> </select> </body> </html> 第二种: <select name="change_select" id="change_select" onchange="self.location.href=options[selectedIndex].value"> <option value="http://www.root.com/test/exercise/s1.html">我的本地项目</option> <option value="https://www.baidu.com/?tn=47018152_dg">百度</option> <option value="http://www.imooc.com/u/1891279">慕课网课程</option> <option value="http://fanyi.baidu.com/#en/zh/restore">翻译</option> </select> 第三种: <select name="change_select" id="change_select" onchange=mbar(this)> <option value="1">百度</option> <option value="2">慕课网课程</option> <option value="3">翻译</option> </select> <input type="button" id= "btn" value="提交" oonclick="submit(this)" /> js: <script type="text/javascript"> function submit () { if(mylink.value == 0) window.location=‘http://www.baidu.com‘; if(mylink.value == 1) window.location=‘http://www.w3cschool.cn‘; if(mylink.value == 2) window.location=‘http://www.youj.com‘; } </script>

其中最要的是获取给select下拉列表元素绑定一个change()事件,就是当这个元素的值发生改变的时候会触发此方法,

然后还有一个就是获取当前选中的option索引: var index  = selectObj.selectedIndex;

var value  = selectObj.options[index].value;

var text    = selectObj.options[index].text;

其他知识点:

Location对象:

Location对象是Window对象的一个部分,可通过window.location属性来访问。

location.reload()刷新当前文档

location.href  设置或返回完整的 URL。

top: 

该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。 

parent: 

该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。 

opener: 

指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。 



附:Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系:Windwo对象→Parent对象→Frame对象→Document对象→Form对象, 

  

详细的<select>下拉列表详解

标签:link   它的   rem   属性   title   改变   服务   style   lin   

原文地址:http://www.cnblogs.com/imnzq/p/6950751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!