jquery实现省市二级联动

桃扇骨 2022-06-04 09:25 227阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta charset="utf-8">
        <title>省市联动</title>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
        <script type="text/javascript">
            var pro=["河南","山东","黑龙江"];
            var city=[["郑州","开封","新政","濮阳","平顶山","洛阳","三门峡"],["济南","日照","烟台","德州","聊城"],["哈尔滨","齐齐哈尔","佳木斯","牡丹江"]];
            $(function(){
                //初始化省份下拉列表
                for(var i=0;i<pro.length;i++){
                    $("#province").append($("<option></option>").val(i+1).html(pro[i]));
                }
                //为省份下拉列表绑定change事件
                $("#province").change(function(){
                    var index=$(this).val()-1;//获取当前省的下标
                    $("#city").prop("length",1);//清空原有的数据
                    for(var i=0;i<city[index].length;i++){//重新为市赋值
                        $("#city").append($("<option>").val(i+1).html(city[index][i]));
                    }
                });
            })
        </script>
    </head>
    <body>
        <div style="height: 200px;width: 300px;background-color: aquamarine;text-align: center" id="div1">
            <select id="province">
                <option value="0" selected>-请选择-</option>
            </select>省
            <select id="city">
                <option value="0" selected>-请选择-</option>
            </select>市
        </div>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML+JS 省市二级联动

文章目录 1. 按 2. 源码 2.1. \`二级联动.html\` 2.2. \`二级联动.js\` 1. 按 1. 创

喜欢ヅ旅行/ 2022年12月15日 09:01/ 0 赞/ 205 阅读

相关实现省市二级联动效果

实现效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

快来打我*/ 2022年10月10日 12:32/ 0 赞/ 208 阅读

相关 jquery实现省市二级联动

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

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

相关 Java数组实现省市二级联动

数组的强大之处毋庸置疑，今天我要写的是用一个一维数组和一个二维数组来实现一个省市二级联动的功能。 1.首先定义一个一维数组，用来存放34个省级行政区域；定义一个二维数组，用来

淩亂°似流年/ 2022年05月24日 03:05/ 0 赞/ 349 阅读

相关 JavaScript 省市二级联动

省市二级联动，只需要传入provsCitysMap的map集合，省市的id值即可。 <script type="text/javascript"> var pro

秒速五厘米/ 2022年05月19日 05:57/ 0 赞/ 240 阅读

相关 jQuery完成省市二级联动

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

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

相关原生js实现省市二级联动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页

拼搏现实的明天。/ 2022年04月06日 07:56/ 0 赞/ 253 阅读

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

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

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

相关 jquery+html 实现完整的省市二级联动和省市区三级联动

实现的效果动态图和效果图如下 ![20190416181640679.gif][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

刺骨的言语ヽ痛彻心扉/ 2022年02月19日 14:25/ 0 赞/ 333 阅读

相关 jQuery中实现省市联动

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

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