jQuery操作select的方法

  1. 设置Select的选中项
  2. 获取Select选中项
  3. 添加/删除Select的Option项

以下面的html为例来说明:

<select name="select" id="select_id">
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option>
    <option value="5">55</option>
    <option value="6">66</option>
</select>

设置Select的选中项

$("#select_id").get(0).selectedIndex = 1; // 设置Select索引值为1的项选中
$("#select_id").val(4); // 设置Select的Value值为4的项选中

//设置select 选中的text,通常可以在select回填中使用
var numId=33 //设置text==33的选中!
var count=$("#select_id  option").length;
for(var i=0;i<count;i++){
    if($("#select_id").get(0).options[i].text == numId) {
        $("#select_id").get(0).options[i].selected = true;
        break;
   }
}

获取Select选中项

var checkValue = $("#select_id").val(); // 获取Select选中项的Value
var checkText = $("#select_id :selected").text();
$("#select_id").find("option:selected").text(); // 获取Select选中项的Text
var checkIndex = $("#select_id").prop("selectedIndex");
$("#select_id").get(0).selectedIndex; // 获取Select选中项的索引值
var maxIndex =$("#select_id :last").get(0).index; // 获取Select最大的索引值

添加/删除Select的Option项

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


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 bin07280@qq.com

文章标题:jQuery操作select的方法

文章字数:405

本文作者:Bin

发布时间:2017-10-01, 21:49:58

最后更新:2019-08-06, 00:52:53

原始链接:http://coolview.github.io/2017/10/01/JavaScript/jQuery%E6%93%8D%E4%BD%9Cselect%E7%9A%84%E6%96%B9%E6%B3%95/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录