【WEB前端开辟】jquery怎样操纵select?

jquery怎样操纵select?下面本篇文章就来给人人引见一下运用jquery操纵select(取值,设置选中)的要领。有肯定的参考价值,有须要的朋侪能够参考一下,愿望对人人有所协助。

一、基本取值题目

比方<select class="selector"></select>

1、设置value为pxx的项选中

$(".selector").val("pxx");

2、设置text为pxx的项选中

$(".selector").find("option:contains('pxx')").attr("selected",true);

注重:之前$(".selector").find("option[text='pxx']").attr("selected",true);这类写法是毛病的,现在个人证明input支撑这类猎取属性值的写法:"input[text='pxx']",select中须要"option:contains('pxx')"如许猎取。

这里有一个中括号的用法,中括号里的等号的前面是属性称号,不必加引号。许多时刻,中括号的运用能够使得逻辑变得很简朴。

3、猎取当前选中项的value

$(".selector").val();

4、猎取当前选中项的text

$(".selector").find("option:selected").text();

这里用到了冒号,掌握它的用法并闻一知十也会让代码变得简约。

二、许多时刻用到select的级联,即第二个select的值跟着第一个select选中的值变化。这在jquery中是异常简朴的。

如:

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 现实的运用中,这里的option平常都是用轮回生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

三、jQuery猎取Select挑选的Text和Value:

语法诠释:

$("#select_id").change(function(){//code...});   //为Select增加事宜,当挑选个中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //猎取Select挑选的Text
var checkValue=$("#select_id").val();  //猎取Select挑选的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //猎取Select挑选的索引值
var maxIndex=$("#select_id option:last").attr("index");  //猎取Select最大的索引值

四、jQuery设置Select挑选的 Text和Value:

语法诠释:

$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中

五、jQuery增加/删除Select的Option项:

语法诠释:

$("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请挑选</option>");  //为Select插进去一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(末了一个)
$("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

六、jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相干

1 猎取一组radio被选中项的值

var item = $('input[name=items][checked]').val();

2 猎取select被选中项的文本

var item = $("select[name=items] option[selected]").text();

3 select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;

4 radio单选组的第二个元素为当前选中值

$('input[name=items]').get(1).checked = true;

七、猎取值

文本框,文本地区:$("#txt").attr("value");

多选框 checkbox:$("#checkbox_id").attr("value");

单选组radio: $("input[type=radio][checked]").val();

下拉框select: $('#sel').val();

八、掌握表单元素:

文本框,文本地区:

$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//添补内容

多选框checkbox:

$("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //推断是不是已打勾

单选组 radio:

$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

下拉框 select:

$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//增加下拉框的option 
$("#sel").empty();//清空下拉框

九、推断在select 是不是存在某个value 的 option:

function is_Exists(selectid,value){
  var theid='#'+selectid;
  var count=$(theid).get(0).options.length;
  var isExist = false;
  for(var i=0;i<count;i++){
    if ($(theid).get(0).options[i].value == value){
      isExist=true;
      break;
    }
  }
  return isExist;
}

引荐进修: jQuery教程

以上就是jquery怎样操纵select?的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注