jQuery中input相關操作大全

jQuery獲取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 
6. $("#select_id option[text='4']").remove();  //刪除Select中Text='4'的Option 


三級分類 <select name="thirdLevel" id="thirdLevel" 
οnchange="getFourthLevel()"> 
<option value="0" id="thirdOption"> 
請選擇三級分類 
</option> 
</select> 
</div> 

四級分類: 
<select name="fourthLevelId" id="fourthLevelId"> 
<option value="0" id="fourthOption"> 
請選擇四級分類 
</option> 
</select> 

</div> 

.if($("#thirdLevel").val()!=0){ 
$("#thirdLevel option[value!=0]").remove(); 

if($("#fourthLevelId").val()!=0){ 
$("#fourthLevelId option[value!=0]").remove(); 
}//這個表示:假如我們希望當選擇選擇第三類時:如果第四類中有數據則刪除,如果沒有數據第四類的商品中的爲默認值。在後面學習了AJAX技術後經常會使用到!

 

獲取Select :

 獲取select 選中的 text :

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

 

 獲取select選中的 value:

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

 

 獲取select選中的索引:

     $("#ddlRegType ").get(0).selectedIndex;

 

設置select:

 設置select 選中的索引:

     $("#ddlRegType ").get(0).selectedIndex=index;//index爲索引值

 

 設置select 選中的value:

    $("#ddlRegType ").attr("value","Normal“);

    $("#ddlRegType ").val("Normal");

    $("#ddlRegType ").get(0).value = value;

 

 設置select 選中的text:

var count=$("#ddlRegType option").length;

  for(var i=0;i<count;i++)  
     {           if($("#ddlRegType ").get(0).options[i].text == text)  
        {  
            $("#ddlRegType ").get(0).options[i].selected = true;  
          
            break;  
        }  
    }

 

$("#select_id option[text='jQuery']").attr("selected", true);

 

設置select option項:

 

 $("#select_id").append("<option value='Value'>Text</option>");  //添加一項option

 $("#select_id").prepend("<option value='0'>請選擇</option>"); //在前面插入一項option

 $("#select_id option:last").remove(); //刪除索引值最大的Option

 $("#select_id option[index='0']").remove();//刪除索引值爲0的Option

 $("#select_id option[value='3']").remove(); //刪除值爲3的Option

 $("#select_id option[text='4']").remove(); //刪除TEXT值爲4的Option

 

清空 Select:

$("#ddlRegType ").empty();


jquery獲得值:

.val()

.text()


設置值 

.val('在這裏設置值')


jquery   checkbox全選和全部選


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Index</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#CheckAll").click(function() { 
var flag = $(this).attr("checked"); 
$("[name=subBox]:checkbox").each(function() { 
$(this).attr("checked", flag); 
}) 
}) 
}) 
</script> 
</head> 
<body> 
<div> 
<input id="CheckAll" type="checkbox" />全選 
<input name="subBox" type="checkbox" />1 
<input name="subBox" type="checkbox" />2 
<input name="subBox" type="checkbox" />3 
<input name="subBox" type="checkbox" />4 
</div> 
</body> 
</html> 




方法二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery實現CheckBox全選、全不選</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function() {
           $("#checkAll").click(function() {
                $('input[name="subBox"]').attr("checked",this.checked); 
            });
            var $subBox = $("input[name='subBox']");
            $subBox.click(function(){
				$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
            });
        });
    </script>

</head>
<body>
    <div>
        <input id="checkAll" type="checkbox" />全選
        <input name="subBox" type="checkbox" />項1
        <input name="subBox" type="checkbox" />項2
        <input name="subBox" type="checkbox" />項3
        <input name="subBox" type="checkbox" />項4
    </div>
</body>
</html>







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