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){} //判断是否已经打勾