您的位置：首页 > Web前端 > JQuery

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

2013-11-11 12:42 489 查看

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.[code]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>
[/code]
亲自试一试

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

HTML DOM Select 对象参考手册
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航