jquery 操作option总结

来源:互联网 发布:个人域名与企业域名 编辑:程序博客网 时间:2024/05/16 05:22

1、获取选中select的value和text,html代码如下:

 代码如下复制代码

<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

jquery select操作

 代码如下复制代码


$("#mySelect").val(); //获取选中记录的value值
$("#mySelect option:selected").text(); //获取选中记录的text值


 jQuery获取Select选择的Text和Value:

 代码如下复制代码

1. var checkText=jQuery("#select_id").find("option:selected").text();   //获取Select选择的Text

2. var checkValue=jQuery("#select_id").val();   //获取Select选择的option Value

3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值

4. var maxIndex=jQuery("#select_id option:last").attr("index");   //获取Select最大的索引值

jQuery添加/删除Select的Option项:

 代码如下复制代码

1. jQuery("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)

2. jQuery("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)
3. jQuery("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)

4. jQuery("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)

5. jQuery("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option

6. jQuery("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option

内容清空:

 代码如下复制代码

jQuery("#select_id").empty();

javascript select操作

2、运用new Option("文本","值")方法添加选项option

 代码如下复制代码

var obj = document.getElementById("mySelect");
obj.add(new Option("4","4"));

3、删除所有选项option

 代码如下复制代码

var obj = document.getElementById("mySelect");
obj.options.length = 0;

4、删除选中选项option

 代码如下复制代码

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);

5、修改选中选项option

 代码如下复制代码

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态

6、删除select

 代码如下复制代码

var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件

 代码如下复制代码

$("#mySelect").change(function(){
//添加所需要执行的操作代码
})

8、 select 中 option隐藏和显示

 代码如下复制代码var sss = $("select option").map(function(){                        
return $(this).val();                   
 });

使用sss[0]就可以得到值了。

 代码如下复制代码$("#select1 option[value='3']).hide();
0 0