JQuery省市级联优化版

最新推荐文章于 2024-05-20 15:17:08 发布

一叶知秋~

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量111

点赞数

分类专栏： JQuery 文章标签： javascript html html5

原文链接：https://blog.csdn.net/qq_43034312/article/details/106550289

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//之前的代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>省市级联</title>

    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

            var array = new Array("湖北省", "湖南省", "陕西省", "上海市");

            var citys = new Array();

            citys[0] = new Array("十堰市");

            citys[1] = new Array("长沙市");

            citys[2] = new Array("西安市");

            citys[3] = new Array("静安区");

            var sheng = $("#proinves")[0]; //跟 document.getElementById("proinves")功能同效

            sheng.length = array.length; //将数组长度赋给声明的省

            for (var i in array) {//循环编写数组里面的省

                var op = new Option(); //创建一个Option

                op.value = array[i]; //将省数组里面的数据赋给创建的Option的value

                op.text = array[i]; //将省数组里面的数据赋给创建的Option的text

                sheng.options[i] = op; //将Option的值

            }

            $("#proinves").change(function () {//下拉框id为proinves的onchange事件

                var sheng = $("#proinves")[0]; //跟 document.getElementById("proinves")功能同效

                var shi = $("#city")[0]; //跟 document.getElementById("city")功能同效

                var index;

                for (var i in array) {//循环遍历

                    if (sheng[i].selected==true) {//判断是否选中

                        index = i; //如果选中的话，将下标赋值给

                        break;

                    }

                }

                shi.length = citys[index].length; //将citys数组的长度赋值给下拉框id为city

                for (var i in citys[index]) {//循环遍历

                    var op = new Option(); //创建一个Option

                    op.value = citys[index][i]; //将省数组里面的数据赋给创建的Option的value

                    op.text = citys[index][i]; //将省数组里面的数据赋给创建的Option的text

                    shi.options[i] = op; //将Option的值

                }

            });

            $("#add").click(function () {//button的id为add的onclick事件

                var shi = $("#city")[0]; //document.getElementById("city")等效

                var txt = $("#txt").val(); //document.getElementById("txt").value等效

                shi.options[shi.length] = new Option(); //创建Option对象

                shi.options[shi.length - 1].value = txt; //将文本框id为txt的value值赋给下拉框的value

                shi.options[shi.length - 1].text = txt; //将文本框id为txt的value值赋给下拉框的text

            });

            $("#del").click(function () {//button的id为del的onclick事件

                var shi = $("#city")[0]; //document.getElementById("city")等效

                if (confirm("你确定要删除么？")) {

                    shi.options[shi.selectedIndex] = null; //将当前的城市的options的索引清除

                }

            })

        })

    </script>

</head>

<body>

<select id="proinves"></select>

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

<input type="text" id="txt"/>

<input type="button" value="添加" id="add"/>

<input type="button" value="删除" id="del"/>

</body>

</html>

 

//优化后的代码：

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>省市级联</title>

    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

        $(function () {//默认的onload事件

            var array = new Array("湖北省", "湖南省", "上海市");

            var citys = new Array();

            citys[0] = new Array("十堰市");

            citys[1] = new Array("长沙市");

            citys[2] = new Array("静安区");

            var sheng = $("#privcon")[0];

            

            sheng.length = array.length;

            $.each(array, function (i, item) {//循环

                var op = new Option();

                op.value = array[i];

                op.text = array[i];

                sheng.options[i] = op;

            });

            $("#privcon").change(function () {//选择省的下拉框的onchange事件

                var sheng = $("#privcon")[0];

                var shi = $("#city")[0];

                var index;

                $.each(array, function (i, item) {

                    if (sheng[i].selected == true) {

                        index = i;

                        return false; //等同于break

                    }

                });

                shi.length = citys[index].length;

                $.each(citys[index], function (j, item) {

                    var op = new Option();

                    op.value = citys[index][j];

                    op.text = citys[index][j];

                    shi.options[j] = op;

                });

            });

            $("#add").click(function () {//添加事件

                var shi = $("#city")[0];

                var txt = $("#txt").val();

                shi.options[shi.length] = new Option();

                shi.options[shi.length - 1].value = txt;

                shi.options[shi.length - 1].text = txt;

            });

            $("#del").click(function () {//删除事件

                var shi = $("#city")[0];

                if (confirm("你确定要删除么？")) {

                    shi.options[shi.selectedIndex] = null;

                }

            });

        });

    </script>

</head>

<body>

    <select id="privcon"></select>

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

    <input type="text" id="txt"/>

    <input type="button" id="add" value="添加"/>

    <input type="button" id="del" value="删除"/>

</body>

</html>

 //主要是循环的优化，这里用到each进行循环遍历~~

一叶知秋~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery省市级联优化版

//之前的代码：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>省市级联</title> <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $
复制链接

扫一扫