你的位置:首页 > Java教程

[Java教程]关于jQuery操作下拉框


今天脑抽了一下,然后给自己挖了一个坑,不过解决了也更清楚这个问题。

开始是这样的:

<select id="province-select">      <option >选择省份</option>      <option class='pro_id' pro_id="1">name1</option>      <option class='pro_id' pro_id="2">name2</option>      <option class='pro_id' pro_id="3">name3</option>      <option class='pro_id' pro_id="4">name4</option>      <option class='pro_id' pro_id="5">name5</option>      <option class='pro_id' pro_id="6">name6</option></select><script>$('.pro-select').click(function(){  var province_id=$(this).attr('pro_id');  var province_response=xxx.ajaxRequest('<{flink ctl="city:city_list"}>',{'province_id':province_id},false);  var city_list='<option>选择城市</option>';  for (pro_id in province_response)  {   console.log(province_response[pro_id].link);   city_list+='<option href="'+province_response[pro_id].link+'" >'+province_response[pro_id].name+'</option>';  }  $('#city-select').html(city_list);});</script>

然后发现死活都不触发这段js代码,然后百度一下……发现自己想错了。

<select>标签是通过Onchange来触发的……所以写了如下代码

<select id="province-select">      <option >选择省份</option>      <option value="1">name1</option>      <option value="2">name2</option>      <option value="3">name3</option>      <option value="4">name4</option>      <option value="5">name5</option>      <option value="6">nam6e</option></select><script>$('#province-select').change(function(){    var province_id=$(this).val();    var province_response=xxx.ajaxRequest('<{flink ctl="city:city_list"}>',{'province_id':province_id},false);    var city_list='<option>选择城市</option>';    for (pro_id in province_response)    {      city_list+='<option href="'+province_response[pro_id].link+'" >'+province_response[pro_id].name+'</option>';    }    $('#city-select').html(city_list);  });</script>

解决问题~

刚才又找到一种方法:

<script>  $(this).find('option:selected').html();   $(this).find('option:selected').attr();</script>