jQuery的Select操作集合

Query獲取Select選擇的Text和Value:
語法解釋:
1. $("#select_id").change(function(){//code...});    //爲Select添加事件,當選擇其中一項時觸發
2. var checkText=$("#select_id").find("option:selected").text();   //獲取Select選擇的Text
3. var checkValue=$("#select_id").val();   //獲取Select選擇的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex;   //獲取Select選擇的索引值

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

jQuery設置Select選擇的Text和Value:
語法解釋:
1. $("#select_id ").get(0).selectedIndex=1;   //設置Select索引值爲1的項選中
2. $("#select_id ").val(4);    //設置Select的Value值爲4的項選中
3. $("#select_id option[text='jQuery']").attr("selected", true);    //設置Select的Text值爲jQuery的項選中

jQuery添加/刪除Select的Option項:
語法解釋:
1. $("#select_id").append("<option value='Value'>Text</option>");   //爲Select追加一個Option(下拉項)
2. $("#select_id").prepend("<option value='0'>請選擇</option>");   //爲Select插入一個Option(第一個位置)
3. $("#select_id option:last").remove();   //刪除Select中索引值最大Option(最後一個)
4. $("#select_id option[index='0']").remove();   //刪除Select中索引值爲0的Option(第一個)
5. $("#select_id option[value='3']").remove();   //刪除Select中Value='3'的Option
5. $("#select_id option[text='4']").remove();   //刪除Select中Text='4'的Option


1.判斷select選項中 是否存在Value="paraValue"的Item 
$("#selectid option[@value='paraValue']").length>0
2.向select選項中 加入一個Item 
$("#selectid").append("<option value=''>1111<option>");
3.從select選項中 刪除一個Item 
$("#selectid").remove("<option value=''>1111<option>");
4.修改select選項中 value="paraValue"的text爲"paraText" 
$("#selectid option:selected").attr("value","paraValue").attr("text","paraText");
5. 設置select中text="paraText"的第一個Item爲選中 
$("#selectid option[@text='paraText']").attr("selected","true")
6.設置select中 value="paraValue"的Item爲選中 
$("#selectid option[@value='paraValue']").attr("selected","true")

7.設置select中第一 個Item爲選中 
$("#selectid option").eq(0).attr('selected', 'true');

8. 得到select的當前選中項的value 
$("#selectid").val();
9.得到select的當前選中項的text 
$("#selectid").text();
10. 得到select的當前選中項的Index 
document.getElementById("select1").selectedIndex;
$("#selectid").get(0).selectedIndex
11. 清空select的項
$("#selectid").empty();

JS版本的:

//1.判斷select選項中 是否存在Value="paraValue"的Item    function jsSelectIsExitItem(objSelect,objItemValue)    {         var isExit = false ;         for ( var i=0;i;I++)         {             if (objSelect.options[i].value == objItemValue)             {                 isExit = true ;                 break ;             }         }              return isExit;    }       //2.向select選項中 加入一個Item    function jsAddItemToSelect(objSelect,objItemText,objItemValue, objItemPos)    {         //判斷是否存在         if (jsSelectIsExitItem(objSelect,objItemValue))         {             alert( "該Item的 Value值已經存在" );         }         else         {             var varItem = new Option(objItemText,objItemValue);    //       objSelect.options[objSelect.options.length] = varItem;             objSelect.options.add(varItem, objItemPos);             alert( "成功加入" );         }       }       //3.從select選項中 刪除一個Item    function jsRemoveItemFromSelect(objSelect,objItemValue)    {         //判斷是否存在         if (jsSelectIsExitItem(objSelect,objItemValue))         {             for ( var i=0;i;I++)             {                 if (objSelect.options[i].value == objItemValue)                 {                     objSelect.options.remove(i);                     break ;                 }             }                    alert( "成功刪除" );                    }         else         {             alert( "該 select中 不存在該項" );         }       }       //4.修改select選項中 value="paraValue"的text爲"paraText"    function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)    {         //判斷是否存在         if (jsSelectIsExitItem(objSelect,objItemValue))         {             for ( var i=0;i;I++)             {                 if (objSelect.options[i].value == objItemValue)                 {                     objSelect.options[i].text = objItemText;                     break ;                 }             }                    alert( "成功修改" );                    }         else         {             alert( "該 select中 不存在該項" );         }       }               //5.設置select中text="paraText"的第一個 Item爲選中    function jsSelectItemByValue(objSelect,objItemText)    {            //判斷是否存在         var isExit = false ;         for ( var i=0;i;I++)         {             if (objSelect.options[i].text == objItemText)             {                 objSelect.options[i].selected = true ;                 isExit = true ;                 break ;             }         }              //Show出結果         if (isExit)         {             alert( "成功選中" );                    }         else         {             alert( "該 select中 不存在該項" );         }       }       //6.設置select中value="paraValue"的Item 爲選中    document.all.objSelect.value = objItemValue;       //7.得到select的當前選中項的value    var currSelectValue = document.all.objSelect.value;       //8.得到select的當前選中項的text    var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;       //9.得到select的當前選中項的Index    var currSelectIndex = document.all.objSelect.selectedIndex;       //10.清空select的項    document.all.objSelect.options.length = 0; 

發佈了17 篇原創文章 · 獲贊 8 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章