关于select标签的一些操作总结

下面是关于select标签的一些常用操作的总结

比如

<select  id="type">
    <option value="1">收件人</option>
    <option value="2">发件人</option>
</select>

1.获得select标签的option的value 和text

 $("#type option").each(function () {
             var txt = $(this).text(); //获取单个text
             var val = $(this).val(); //获取单个value

         });

2，设置value为1的选中

 $("#type").val("1");

3.设置text为1的项选中

$("#type").find("option[text='1']").attr("selected",true);

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

4.获取当前选中项的value

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

5.获取当前选中项的text

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

这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。

多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。

如：

$(".selector1").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中，这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});