select下拉框之JS/JQuery详细操作
来源:互联网 发布:魔龙诀经脉进阶数据 编辑:程序博客网 时间:2024/06/05 16:00
一、js 操作select 下拉框
var selObj = 下拉框对象
1. 移除所有项:
selObj.options.length = 0;
2. 移除下拉框中的一项:
selObj.options.remove(index);
“index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进
也可利用循环,移除所有项:
var length = selObj.options.length;for(var i=length-1;i>=0;i--){ selObj.options.remove(i);}
3. 移除下拉框的选中项:
selObj.options[selObj.selectedIndex] = null;
“selectedIndex”为下拉框选中项的索引值,“options[index]”这里也是获取下拉框索引值=index的选项
4. 添加下拉框选项:
selObj.options.add(new Option(text, value));
“text”为下拉框选项的显示文本,“value”为下拉框选项的值,此方法会在下拉框末尾添加,索引值最大
5. 修改下拉框选中项:
selObj.options[selObj.selectedIndex] = new Option(text , value);
6. 获取下拉框选中项的值:
selObj.options[selObj.selectedIndex].value
7. 下拉框是否选中:
selObj.selectedIndex > -1 ? //选中 ://没有选中
二、jQuery 操作select 下拉框
var selId = 下拉框对象ID
1. 获取指定下拉框选项:
$("#selId").find("option:selected");
“option:selected”为选中项,“option:first”为首项(索引值为0),“option:last”为末项(索引值最大)
$("#selId option[value='xxx']");
获取下拉框选项值为“xxx”的选项
//$("#selId option[text='xxx']");
//$("#selId option[index='x']");
以上2种方法测试后,均返回Object,但.val()方法返回undefined,.text()方法返回为空,.attr("selected", true)方法更无效果,建议不要使用!!
2. 获取下拉框选中项的文本:
$("#selId").find("option:selected").text();
3. 获取下拉框选中项的值:
$("#selId").val();
4. 获取下拉框选中项的索引:
$("#selId").get(0).selectedIndex;
“get(0)”即获取选中项
例如:
<select id="selId"> <option value="a">AAA</option> <option value="b">BBB</option> <option value="c">CCC</option> <option value="e" selected="selected">EEE</option></select>
用此方法获取以上下拉框选中项的索引值为3。
5. 设置下拉框的选中项:
$("#selId").get(0).selectedIndex = index;
设置下拉框中选项的索引值=index的项为选中项
$("#selId").attr("value","xxx“);
$("#selId").val("xxx");
$("#selId").get(0).value = "xxx";
以上3个方法都是设置下拉框中选项的值=“xxx”的项为选中项
6. 添加下拉框选项:
$("#selId").append("<option value='Value'>Text</option>");
$("#selId").prepend("<option value='Value'>Text</option>");
“append”在下拉框末尾添加,添加后此项索引值最大; “prepend”在下拉框的首部添加,添加后此项索引值为0
7. 移除下拉框选项:
$("#selId option[value='xxx']").remove();
移除下拉框选项值为“xxx”的选项
8. 清空下拉框所有选项:
$("#selId").empty();
$("#selId option").remove();
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- select下拉框之JS/JQuery详细操作
- select下拉框之JS/JQuery详细操作
- js Jquery 操作Select 下拉框
- jquery select下拉框操作
- jquery操作下拉框select
- jquery操作select下拉框
- jquery操作下拉框select
- jQuery操作select下拉框
- Jquery 操作select下拉框
- JQuery操作select下拉列表框
- JQuery操作select下拉列表框
- 利用jquery操作select下拉列表框
- jquery操作select下拉列表框
- 利用jquery操作select下拉列表框
- 利用jquery操作select下拉列表框
- jquery select 下拉框实用操作
- jQuery操作select下拉框的方法
- jQuery对下拉框Select操作总结
- 黑马程序员_java_io(上)
- GB28181 SIP视频监控系列专题之 SIP国标解析
- 单例模式的C++实现
- UVa 101 - The Blocks Problem
- alsa 音频路径的问题:
- select下拉框之JS/JQuery详细操作
- 4.30
- poj 2186 korasaju算法 popular cow
- Pipe Comet
- PipeComet测试
- JQueryEasyUI学习笔记(十一)datagrid 右键菜单,冻结列
- Design Pattern_Decorator(装饰器模式)
- C++中的static关键字
- day01:枚举类型实现单例设计模式