jQuery操作Select

jQuery操作Select

Select用法

select 元素是一种表单控件，可用于在表单中接受用户输入。select 元素可创建单选或多选菜单。

使用示例：

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

操作主要有：

• 设置选中
• 取值

假设Html代码为：

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

设计选中

 

1. 设置value为pxx的项选中

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

1. 设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);
   

   这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

获取当前值

1. 获取当前选中项的value

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

1. 获取当前选中项的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);
});