jquery select赋值与取值实例大全

发布时间:2019-11-23编辑:脚本学堂
有关jquery为select赋值与取值的方法,使用jquery代码对select赋值比js要方便,另外jquery还可以获取select中text与value值及索引等数据.

一、jquery为select赋值与取值

例子:
 

复制代码 代码示例:

jquery("#select_id").change(function(){}); // 1.为select添加事件,当选择其中一项时触发    
var checkvalue = jquery("#select_id").val(); // 2.获取select选中项的value 
var checktext = jquery("#select_id :selected").text(); // 3.获取select选中项的text  
var checkindex = jquery("#select_id").attr("selectedindex");// 4.获取select选中项的索引值,
//或者:
jquery("#select_id").get(0).selectedindex; 
var maxindex = jquery("#select_id :last").attr("index");  // 5.获取select最大的索引值,
//或者:
jquery("#select_id :last").get(0).index;

jquery("#select_id").get(0).selectedindex = 1; // 1.设置select索引值为1的项选中 
jquery("#select_id").val(4);  // 2.设置select的value值为4的项选中
$("#select_id").attr("value","normal“);
$("#select_id").get(0).value = value;
//根据select的显示值来为select设值
var count=$("#select_id").get(0).options.length;
for(var i=0;i<count;i++){
if($("#select_id").get(0).options[i].text == text) 
{
$("#select_id").get(0).options[i].selected = true;         
break

}
 
jquery("#select_id").append("<option value='新增'>新增option</option>"); // 1.为select追加一个option(下拉项)  
jquery("#select_id").prepend("<option value='请选择'>请选择</option>"); // 2.为select插入一个option(第一个位置) 
jquery("#select_id").get(0).remove(1);  // 3.删除select中索引值为1的option(第二个) 
jquery("#select_id :last").remove();  // 4.删除select中索引值最大option(最后一个)  
jquery("#select_id [value='3']").remove(); // 5.删除select中value='3'的option  
jquery("#select_id").empty();   // 6.清空下拉列表

二、jquery select取值与赋值操作

一、获取select值
 

获取select 选中的 text: 
$("#ddlRegType").find("option:selected").text();
 
获取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();

下拉框:
 

var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2、单选框:
 

$("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3、复选框:
 

复制代码 代码示例:

$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
   alert($(this).val());
});
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾
//遍历option和添加、移除option
function changeShipMethod(shipping){
 var len = $("select[@name=ISHIPTYPE] option").length
 if(shipping.value != "CA"){
  $("select[@name=ISHIPTYPE] option").each(function(){
   if($(this).val() == 111){
    $(this).remove();
   }
  });
 }else{
  $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
 }
}

//取得下拉选单的选取值
$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();