根据一个下拉框改变另外一个下拉框内容

HTML 专栏收录该内容
5 篇文章 0 订阅

一、前言

在编写网页的时候,有时候需要用到多重内容选择,例如先选择省市,再选择县镇等过程。这里简单实现了根据第一个下拉框点击的时候修改另外一个下拉框的内容,希望能对大家有所帮助。

二、实现思路

定义两个select选择框,在js脚本中设置第一个下拉框的onchange函数,点击时删除第二个下拉框原有的内容并添加新的内容。

三、HTML+JS源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据一个下拉框改变另外一个下拉框的内容</title>
</head>

<body> 
    
<!第一个下拉框内容>
<select id="initials" onchange="Change_second_selectwords();"> 
    
	<option value="">Initial keywords</option> 
	<option value="A">A</option> 
	<option value="B">B</option> 
	<option value="C">C</option> 
</select> 


<select id="top_domains"></select> 
    <script>
        var first_keywords = {};
        //定义每个字母对应的第二个下拉框
        first_keywords['A'] = ['a1', 'a2', 'a3'];
        first_keywords['B'] = ['b1', 'b2', 'b3'];
        first_keywords['C'] = ['c1', 'c2', 'c3'];
        function Change_second_selectwords() {
            //根据id找到两个下拉框对象
            var target1 = document.getElementById("initials");
            var target2 = document.getElementById("top_domains");
            //得到第一个下拉框的内容
            var selected_initial = target1.options[target1.selectedIndex].value;

            //清空第二个下拉框
            while (target2.options.length) {
                target2.remove(0);
            }
        //根据第一个下拉框的内容找到对应的列表
        var initial_list = first_keywords[selected_initial];
        if (initial_list) {
            for (var i = 0; i < initial_list.length; i++) {
                var item = new Option(initial_list[i], i);
                //将列表中的内容加入到第二个下拉框
                target2.options.add(item);
            }
        }
} 
        </script>
</body>
</html>

四、运行情况

1、初始情况

在这里插入图片描述

2、点击后情况对比

在这里插入图片描述

  • 7
    点赞
  • 4
    评论
  • 30
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值