Jquery操作select汇总

转载：http://www.cnblogs.com/pepcod/archive/2012/07/03/JavaScript.html

//Query获取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

 

清空option下拉，可以用： $("#" + selecetId).empty();

个人实战案例（实现两个下拉框联动效果）：

异步加载，动态修改另一个下拉框的option

                function changeBdzDydj(dom, selecetId) {
                    var dydj = $(dom).val();
                    //alert(dydj);
                    console.log('dydj===' + dydj);
                    var url = __ctx + "/yjbdz/yjbdz/yjbdz/getByDydj.ht";
                    var params = {
                        dydj : dydj
                    }
                    $.ajax({
                        url : url,
                        data : params,
                        type : "post",
                        async : true,
                        success : function(rtn) {
                            var dcmcs = rtn.split(",");
                            $("#" + selecetId).empty();
                            $("#" + selecetId).append("<option value=''>请选择厂站</option>");
                            for ( var key in dcmcs) {
                                //                                console.log(dcmcs[key]);
                                var op = dcmcs[key];
                                if (op) {
                                    $("#" + selecetId).append("<option value='"+op+"'>" + op + "</option>");
                                }
                            }
                            var maxIndex = $("#select_id option:last").attr("index"); //获取Select最大的索引值
                            if (maxIndex == 1) {
                                $("#" + selecetId).empty();
                            }
                        },
                        error : function() {
                            alert("修改失败");
                        }
                    });
                }

 

后台段加载数据

    /**
     * @param request
     * @param response
     * @return 获取dydj以逗号隔开，拼接成字符串返回
     * @throws Exception
     *             String
     * 
     */
    @RequestMapping("getByDydj")
    @ResponseBody
    public String getByDydj(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String res = "";
        String dydj = request.getParameter("dydj");
        List<Yjbdz> list = yjbdzService.getByDydj(dydj);
        for (Yjbdz yjbdz : list) {
            res += yjbdz.getMc() + ",";
        }
        if (res.endsWith(",")) {
            res = res.substring(0, res.length() - 1);
        }
        return res;
    }

 

    <td><select name="1" class="w100 inputbg"   onchange="changeBdzDydj(this,'mySelect0')">
                        <option>请选择电压等级</option> &nbsp;
                         <c:forEach items="${dydjs }" var="e">
                                <option value="${e.basename}">${e.basename }</option>
                          </c:forEach>
                </select></td>
                <td><select name="1" class="w100 inputbg"  id="mySelect0">
                        <option>请选择厂站</option> &nbsp;
                </select></td>