select控件的change事件

  最近碰到個市區聯動select，相關結構如下：

<li class="form-itemWrap">
  <dl class="form-item">
    <dt class="form-item-title"><label for="J_City">地址：</label></dt>
    <dd class="form-item-content">
      <p class="form-item-content-item">
        <select id="J_City" name="city" class="form-select">
         <option value="-1">請選擇</option>
         <!-- <option value="$city.id">$city.name</option> 程序循環出來的city列表 -->
       </select>
      </p>
      <p class="form-item-content-item">
        <select id="J_Area" name="area" class="form-select">
         <option value="-1">請選擇</option>
       </select>
      </p>
    </dd>
   <dd class="form-item-tip">
     <p class="form-item-tip-msg">必選</p>
   </dd>
  <dl class="form-item">
</li>

var selectCityVal = '程序指定的當前城市id';

  從結構上我們知道有2個select，一個是市下拉列表，一個是對應市的地區列表，而且程序加載完成后，需要js設置市select默認選中值為 selectCityVal 的option。

  前面我的做法就是，js設置 $('#J_City').val( selectCityVal ); 我以為js設置select的默認值也會觸發select的change事件，那么area下拉列表的項也就會從ajax那邊過來的數據填充，可是我實驗了以后，卻沒有觸發city的change事件。后面我網上搜索一下，才知道js設置的selct值不會觸發change事件，解決辦法也有的，就是object.fireEvent()，在設置了select的值后使用 object.fireEvent('onchange');來觸發change事件(IE:document.getElementByIdx_x('hid_provider_id').attachEvent("onpropertychange",function(){alert('gggg');});)。舉一反三，利用JQuery，我們可以在設置了select的值后，手動觸發一次change事件，代碼如下：

var $city = $('#JCity');
selectCityVal?$city.val(selectCityVal):$city.val('-1');
$city.trigger('change');

  這樣就可以保證select每次頁面加載都能觸發一次change事件了。

 

  下面附上 JQuery 操作select,input[type=checkbox],input[type=radio]等的相關操作：

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

select[name='country'] option[selected] 表示具有name 屬性，
並且該屬性值為'country' 的select元素 里面的具有selected 屬性的option 元素；
可以看出有開頭的就表示后面跟的是屬性。

單選框:
$("input[type=radio][checked]").val(); //得到單選框的選中項的值(注意中間沒有空格)
$("input[type=radio][value=2]").attr("checked",'checked'); //設置單選框value=2的為選中狀態.(注意中間沒有空格)

復選框:
$("input[type=checkbox][checked]").val(); //得到復選框的選中的第一項的值
$("input[type=checkbox][checked]").each(function(){ //由於復選框一般選中的是多個,所以可以循環輸出
alert($(this).val());
});

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判斷是否已經打勾