jquery操作select下拉框：取值，賦值，刪除

1.jQuery對select的取值

 

<select id="test">  
  <option value ="1">測試1</option>  
  <option value ="2">測試2</option>  
  <option value="3" >測試3</option>  
  <option value="4" >測試4</option>  
</select>

 

用上面的select舉例說明：

取得value: var value=$("#test").val();

取得text:    var text=$("#test").find("option:selected").text();

獲取Select選擇的索引值: var checkIndex=$("#test ").get(0).selectedIndex;

獲取Select最大的索引值: var maxIndex=$("#test  option:last").attr("index");

 

2.jquery對select的賦值

jquery對select的動態賦值，動態賦值是實際項目中用的最多的,往往和下拉框的二級聯動用在一起。

 

//獲得收費單位動態賦值給下拉框
        function getCityList(){
            var provCd=$("#provList").val();
            var billStyle=$("#billStyle").val();
            
            if(provCd==""||billStyle=="")
                return;
            var optionstring="";
            $("#cityList").empty();
            $.ajax({
                url:'<%=root%>/employ/bmfwAction!getBillCompanyBilProvCdAndType',   
                type:'post', 
                data:'billStyle='+billStyle+'&provCd='+provCd,
                success:function(data){
                    $.each(data,function(key,value){  //循環遍歷后台傳過來的json數據
                        optionstring += "<option value=\"" + value.billMchntCd + "\" >" + value.billNm + "</option>";
                    });
                    $("#cityList").html("<option value=''>請選收費單位</option> "+optionstring); //獲得要賦值的select的id，進行賦值
                }
            });
        }

 

 

下面的追加option

   $("#test").append("<option value='5'>測試5</option>");   //為Select追加一個Option(下拉項)

   $("#test").prepend("<option value='0'>測試6</option>");   //為Select插入一個Option(第一個位置)

 

3.jquery對select的刪除

 $("#test").empty();用的最多 

 $("#test  option:last").remove();   //刪除Select中索引值最大Option(最后一個)

 $("#test  option[index='0']").remove();   //刪除Select中索引值為0的Option(第一個)

 $("#test  option[value='3']").remove();   //刪除Select中Value='3'的Option

 $("#test  option[text='4']").remove();   //刪除Select中Text='4'的Option