jquery获得select option的值和对select option的操作

来源：互联网发布：淘宝贷款条件编辑：程序博客网时间：2024/05/17 02:59

jquery获得select option的值和对select option的操作

2012-02-06 09:25:07| 分类：jquery|字号订阅

实例：

 <script src="jquery-1.5.2.min.js"></script><select name="country" id="country" > <option> </option> <option value="1" tel='86'>china</option> <option value="2" tel='12'>USA</option> <option value="3" tel='03'>Jpan</option></select><br/><input type="text" name="conuntyTelphone" id="conuntyTelphone" /><script>$(document).ready(function(){ $('#country').bind('change',function(){  var v = this.value;  $("#conuntyTelphone").attr('value',v > 0 ? '+'+$("#country option[value='"+v+"']").attr("tel") : '');
 }); });</script>

获取Select ：

获取select 选中的 text :

$("#ddlRegType").find("option:selected").text();

获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引:

$("#ddlRegType ").get(0).selectedIndex;

设置select:

设置select 选中的索引：

$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

$("#ddlRegType ").attr("value","Normal“);

$("#ddlRegType ").val("Normal");

$("#ddlRegType ").get(0).value = value;

设置select 选中的text:

var count=$("#ddlRegType option").length;

for(var i=0;i<count;i++) { if($("#ddlRegType ").get(0).options[i].text == text) { $("#ddlRegType ").get(0).options[i].selected = true; break; } }

$("#select_id option[text='jQuery']").attr("selected", true);

设置select option项:

$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option

$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option

$("#select_id option:last").remove(); //删除索引值最大的Option

$("#select_id option[index='0']").remove();//删除索引值为0的Option

$("#select_id option[value='3']").remove(); //删除值为3的Option

$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

清空 Select:

$("#ddlRegType ").empty();

jquery获得值：

.val()

.text()

设置值

.val('在这里设置值')

$("document").ready(function(){ $("#btn1").click(function(){ $("[name='checkbox']").attr("checked",'true');//全选 }) $("#btn2").click(function(){ $("[name='checkbox']").removeAttr("checked");//取消全选 }) $("#btn3").click(function(){ $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 }) $("#btn4").click(function(){ $("[name='checkbox']").each(function(){//反选 if($(this).attr("checked")){ $(this).removeAttr("checked"); } else{ $(this).attr("checked",'true'); } }) }) $("#btn5").click(function(){//输出选中的值 var str=""; $("[name='checkbox'][checked]").each(function(){ str+=$(this).val()+"\r\n"; //alert($(this).val()); }) alert(str); })

})

HTML DOM options 集合

HTML DOM Select 对象参考手册

定义和用法

option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

注释：数组中的每个元素对应一个 <option> 标签 - 由 0 起始。

语法

selectObject.options[]

说明

options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：

如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。

实例

下面的例子返回下拉列表中所有选项的文本：

<html><head><script type="text/javascript">function getOptions()  {  var x=document.getElementById("mySelect");  var y="";  for (i=0;i<x.length;i++)    {    y+=x.options[i].text;    y+="<br />";    }  document.write(y);  }</script></head><body><form>请选择您喜欢的水果：<select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><br /><br /><input type="button" onclick="getOptions()" value="输出所有选项"></form></body></html>

亲自试一试

TIY

输出下拉列表中所有选项的文本
设置下拉列表中被选选项的文本

HTML DOM Select 对象参考手册

jquery获得select option的值 和对select option的操作