前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动

最新推荐文章于 2023-07-09 09:38:20 发布

浅香沉木

最新推荐文章于 2023-07-09 09:38:20 发布

阅读量642

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Java_53/article/details/106169273

版权

二级联动菜单

select 对象

一个<select>标记，对应一个select对象；

select对象的属性

1,options[] :设置或返回下拉列表中<option>标记构成的数组；
2,selectedIndex :设置或选中指定<option>的索引号；
3,length :指定下拉列表中<option>标记的个数；
4,name :元素名称；

option对象

一个<option>标记，对应一个option对象；

option 对象属性

1,text :指<option>和</option>之间的文本；
2,value :指是指<option>标记的属性；

实例：省份列表与城市列表的联动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS二级联动菜单</title>
</head>
<script type="text/javascript">
    var arr_province = ["请选择省份/城市", "北京市", "上海市", "天津市", "河南省", "山东省", "河北省"];
    var arr_city = [
        ["请选择城市/地区"],
        ["中关村", "海淀区", "朝阳区", "昌平区", "丰台区", "大兴区"],
        ["宝坻区", "浦东新区", "长宁区", "徐汇区", "虹口区", "宝山区"],
        ["和平区", "河东区", "河西区", "塘沽区", "大港区", "北辰区"],
        ["郑州市", "洛阳市", "商丘市", "开封市", "安阳市", "濮阳市"],
        ["济南市", "青岛市", "烟台市", "德州市"],
        ["石家庄", "菏泽市", "唐山市"],
    ];
    function init() {
        var province = document.form1.province;//获取省份列表对象
        province.style.width = 150 + "px";//设置省份列表宽度
        var city = document.form1.city;//获取城市列表对象
        city.style.width = 150 + "px";//设置城市列表的宽度
        //给province赋值长度，才能在其里面写入内容
        province.length = arr_province.length;//省份列表的长度等于省份数组的长度
        //循环输入省份数组中的值到省份列表中的option标记中
        for (var i = 0; i < arr_province.length; i++) {
            province.options[i].text = arr_province[i];//省份列表中的每个option的文本值等于省份数组中对应的索引值
            province.options[i].value = arr_province[i];//省份列表中的每个option的value属性的值等于省份数组中对应的索引值
        }
        //设置默认被选中的选项
        var index = 0;
        province.selectedIndex = index;
        //给city赋值高度，才能在其里面写入内容
        city.length = arr_city[index].length;//city的长度对应着二维数组中的相应的数组元素的长度；
        //循环输入城市二维数组中对应的一维数组的值到城市列表中的option标记中
        for (var j = 0; j < arr_city[index].length; j++) {
            city.options[j].text = arr_city[index][j];//城市列表中的每个option的文本值等于城市数组中对应的索引值
            city.options[j].value = arr_city[index][j];//城市列表中的每个option的value属性的值等于城市数组对应的一维数组中对应的索引值
        }

    }
    function select_change(num) {//选中的项发生改变时，触发的函数
        var city = document.form1.city;//获取城市列表对象
        city.length = 0;//设置城市列表的默认的初始长度
        city.length = arr_city[num].length;//改变城市列表的长度为城市二维数组中被选中的省份对应的一维数组的长度
        for (var i = 0; i < arr_city[num].length; i++) {//更改城市列表中的option数组
            city.options[i].text = arr_city[num][i];//城市列表中的每个option的文本值等于城市数组中对应的索引值
            city.options[i].value = arr_city[num][i];//城市列表中的每个option的value属性的值等于城市数组对应的一维数组中对应的索引值
        }
    }
</script>


<body οnlοad="init()">
    <!-- 加载完成后调用初始化form的函数 -->
    <form name="form1">
        所在地区：<select name="province" οnchange="select_change(this.selectedIndex)"></select>
        城市：<select name="city"></select>
    </form>
</body>

</html>

显示效果如下：
在这里插入图片描述

在这里插入图片描述

@沉木

浅香沉木

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动

二级联动菜单select 对象一个<select>标记，对应一个select对象；select对象的属性1,options[] :设置或返回下拉列表中<option>标记构成的数组；2,selectedIndex :设置或选中指定<option>的索引号；3,length :指定下拉列表中<option>标记的个数；4,name :元素名称；option对象一个<option>标记，对应一个option对象；option 对象属
复制链接

扫一扫