关于jQuery操作下拉框

最新推荐文章于 2023-01-03 11:06:23 发布

清，纯一色

最新推荐文章于 2023-01-03 11:06:23 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 大数据 ViewUI

原文链接：http://www.cnblogs.com/leekale/p/5200244.html

本文讨论了如何解决HTML页面中下拉菜单触发JS代码的问题，包括使用<select>标签的onChange事件和改进的ajax请求实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

开始是这样的：

<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 class="city-name" 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 class="city-name" 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>

转载于:https://www.cnblogs.com/leekale/p/5200244.html