jQuery_省市选择

向右看齐 2022-05-21 00:19 186阅读 0赞

省市选择：

HTML结构：

<select name="provice" id="provice">
    </select>
    <select name="city" id="city">
    </select>

城市数据的格式：  
![这里写图片描述][70]  
JS：

//首先显示省份
            //each函数第一个参数是一个数组，第二个是函数
            //函数的第一个参数是索引（key），第二参数是value
            $.each(CITYS,function(keyPro,citys){ 
               var $pro = $('<option>'+ keyPro +'</option>');
                $('#provice').append($pro);
            });
    
            //当省份改变的时候触发城市变化
            $('#provice').on('change',function(){ 
                //防止省份后改变城市直接在后面上追加
                    $('#city').empty();
                 var pro = $('#provice option:selected').text();
                $.each(CITYS[pro],function(i,city){ 
                   var $city = $('<option>'+ city+'</option>');
                    $('#city').append($city);
                });
            });
    
            //在初始化页面时就去触发一下省份改变事件
            $('#provice').triggerHandler('change');

效果：  
![这里写图片描述][70 1]  
在页面上加载完成，为了让城市的选项不空着，就要用triggerHander触发Provice改变事件

[70]: /images/20220521/4fce19dcb0464284802493280e17dfaa.png
[70 1]: /images/20220521/e9ffe3e6b4a44883b94d421cfab4855c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 13 阅读

相关 Element UI 中国省市区级联选择器

目录 1.安装 2.说明 3.示例 -------------------- 1.安装 npm install element-china-area-d

迷南。/ 2023年09月27日 13:58/ 0 赞/ 141 阅读

相关 php留言版省市下拉选择,jquery实现省市select下拉框的替换(示例代码)

省市对应的实现：更具选择的省份来确定市的内容 jsp代码：省份 \--请选择-- 福建北京山东上海县、市 \--请选择-- js代码： fu

痛定思痛。/ 2023年01月15日 15:20/ 0 赞/ 94 阅读

相关 jquery实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w

桃扇骨/ 2022年06月04日 09:25/ 0 赞/ 297 阅读

相关 jQuery_省市选择

省市选择： HTML结构： <select name="provice" id="provice"> </select> <select name=

向右看齐/ 2022年05月21日 00:19/ 0 赞/ 187 阅读

相关 jquery省市级联简单例子

ajax方式： $("\sf").change(function()\{ $("\shi").empty();//清空城市表 $("\shi").ap

Bertha 。/ 2022年05月17日 00:37/ 0 赞/ 175 阅读

相关 jQuery完成省市二级联动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

超、凢脫俗/ 2022年04月06日 08:20/ 0 赞/ 337 阅读

相关 Jquery+Ajax+Servlet实现省市二级联动

domain类 / @author maple 省份 / public class Province {

不念不忘少年蓝@/ 2022年02月24日 03:36/ 0 赞/ 353 阅读

相关适合包邮地区的省市选择 jquery插件

省市数据来源于互联网，数据不对请及时告知，谢谢！一、插件注意： 1.插件用了es6的箭头函数，只适用于高级浏览器，可自行webpack结合babel打包一下。二

素颜马尾好姑娘i/ 2022年02月03日 19:59/ 0 赞/ 192 阅读

相关 jQuery中实现省市联动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

r囧r小猫/ 2021年09月18日 23:04/ 0 赞/ 404 阅读