大家好,欢迎来到IT知识分享网。
<select> 元素(下拉列表)
<select> 元素用于创建下拉列表;而<option> 元素用于定义列表中待选择的选项。列表通常会把首个选项显示为被选选项。
提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。
属性:
autofocus :下拉列表在页面加载时自动获得焦点,是一个布尔属性;
disabled:下拉列表应该被禁用,被禁用的下拉列表既不可用,也不可点击。比如你可以设置 disabled 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该下拉列表的使用。然后,可以使用 JavaScript 来移除 disabled 属性的值,以使下拉列表变为可用状态。
multiple :可同时选择多个选项。
name :下拉列表的名称。用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据。
required :用户在提交表单前必须选择一个值。
size :下拉列表中可见选项的数目。如果 size 属性的值大于 1,但是小于列表中选项的总数目,浏览器会显示出滚动条,表示可以查看更多选项。
1. 如何设置默认选中呢
设置默认选中可在option 中添加 selected = “selected”,具体举例如下:
<option value=”2″ selected=”selected”>test2</option>
2. 如何动态创建select对象呢?
(1)先动态创建select
① var mySel = document.createElement("select"); //创建select
② mySel.id = "citySel"; //为select添加id
③ document.body.appendChild(mySel); //将select追加到body中
//创建select
② mySel.id = "citySel"; //为select添加id
③ document.body.appendChild(mySel); //将select追加到body中
(2)动态创建option
① var obj=document.getElementById('citySel'); //根据id查找对象
② obj.add(new Option("文本","值")); //添加一个选项
//根据id查找对象
② obj.add(new Option("文本","值")); //添加一个选项
3. 删除option
(1)删除所有option
① var obj=document.getElementById('citySel'); //获取select对象
② obj.options.length=0; //设置option的length为0
//获取select对象
② obj.options.length=0; //设置option的length为0
(2)删除某一个option
① var obj=document.getElementById('citySel'); //获取select对象
//获取select对象
② var i=obj.selectedIndex; //i为要删除选项的下标(取当前选中选项的下标)
obj.options.remove(i); //调用remove方法
4. 如何获取或者设置到相对应的值呢?
<select id="citySel" onchange="selChange()" class="select">
<option value="">请选择城市</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
方法一:javascript
1:获取select对象:
var myselect=document.getElementById("citySel");
2:取到选中项的索引:
var index = myselect.selectedIndex;// selectedIndex是所选中的项的index
3:获取选中项的value:
myselect.options[index].value;
4:取到选中项的文本内容:
myselect.options[index].text;
// selectedIndex是所选中的项的index
5:获取选中项的value:
myselect.options[index].value;
6:取到选中项的文本内容:
myselect.options[index].text;
方法二:jquery
1:var options=$("#citySel option:selected"); //获取选中的option
2:options.val(); //拿到选中项的值,比如选中上海,获取的值为“sh”;
3:options.text(); //拿到选中项的文本,比如选中上海,获取的值为“上海”
//获取选中的option
2:options.val(); //拿到选中项的值,比如选中上海,获取的值为“sh”;
3:options.text(); //拿到选中项的文本,比如选中上海,获取的值为“上海”
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/24103.html