《前端》JavaScript二轮基础复习（七）--下拉列表框特效--2020年7月21日

这篇博客主要介绍了JavaScript中设置下拉框值、动态添加/删除选项、二级及三级联动下拉列表框的实现，包括new Option的用法和联动效果的详细步骤。还探讨了可输入的下拉列表框的实现思路，通过覆盖文本框并显示用户选择的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、程序设置下拉框的值

一般用户通过下拉框手动选取自己需要的选项值，但是如不通过手动选取，能不能做到程序设置下拉框的选值呢？

<div id="id-div-center">
    设置颜色:&nbsp;&nbsp;
    <select name="selSetColor" id="idSelSetColor">
        <option>请选择...</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
    </select><br><br>
    请选择颜色:&nbsp;&nbsp;
    <input type="radio" name="radioColor" value="red" onclick="setSelValue(this.value);" checked/>Red&nbsp;&nbsp;
    <input type="radio" name="radioColor" value="yellow" onclick="setSelValue(this.value);"/>Yellow&nbsp;&nbsp;
    <input type="radio" name="radioColor" value="green" onclick="setSelValue(this.value);"/>Green&nbsp;&nbsp;
</div>
</body>
<script type="text/javascript">
    /**
     * 初始化设置下拉列表框
     * @param ev
     */
    // 初始下，给red单选框一个checked默认值。下面代码作用是判断如果单选框被选中（有checked属性），把这个单选框的值给下拉框
    window.onload = function (ev) {
        var idSel = document.getElementById('idSelSetColor');//下拉框
        var arrRadio = document.getElementsByName("radioColor");//单选框列表
        for (let i = 0; i < arrRadio.length; i++) {
            if (arrRadio[i].checked) {
                
                idSel.value = arrRadio[i].value;
            }
        }
    };
    /**
     * set select value
     * @param val
     */
    function setSelValue(val) {
        // 把点击的单选框的值给下拉框
        var idSel = document.getElementById('idSelSetColor');
        idSel.value = val;
    }
</script>

2、动态/删除添加下拉框选项

核心知识点：

1、给下拉框加上新的option的语句：

idSel.options.add(new Option(val, text));

2、删除下拉框某个选项的语句：

idSel.options.remove(idSel.selectedIndex);

3、删除下拉框所有选项：将下拉框选项长度设为零。

idSel.options.length = 0;

案例代码：

<body>
    <div id="id-div-center">
        设置颜色:
        <select name="selSetColor" id="idSelSetColor">
            <option>请选择...</option>
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="green">Green</option>
        </select><br>
        <input type="button" id="idAddColor" value="添加颜色" onclick="addColor(this.id)" /><br>
        value:<input type="text" id="idSelVal" value="" />
        text:<input type="text" id="idSelText" value="" /><br>
        <input type="button" id="idRemoveColor" value="删除颜色" onclick="removeColor(this.id)" /><br>
        <input type="button" id="id-remove-all-color" value="全部删除" onclick="removeAllColors(this.id)"/>
    </div>
</body>
<script type="text/javascript">
    function addColor(thisid) {
        var sel = document.getElementById("idSelSetColor");//下拉框
        var SelValinpt = document.getElementById("idSelVal");//value文本框
        var SelTextinpt = document.getElementById("idSelText");//text文本框
        var SelValinptval = SelValinpt.value;
        var SelTextinptval = SelTextinpt.value;
        sel.options.add(new Option(SelTextinptval, SelValinptval));
    }
    function removeColor() {
        var sel = document.getElementById("idSelSetColor");//下拉框
        sel.options.remove(sel.selectIndex);
    }
    function removeAllColors(){
        var sel = document.getElementById("idSelSetColor");//下拉框
        sel.options.length=0;
    }
</script>

注：下拉框对象属性 selectedIndex 的使用。HTML DOM Select 对象 https://www.w3school.com.cn/jsref/dom_obj_select.asp

3、二级联动下拉列表框

即：两个从属关系的下拉列表。在选择上一级下拉框时，下一级下拉框选项会随之切换。

知识点：

3.1 注意学会new Option的用法：

new Option 用于创建一个新的选项。new Option()函数的作用_hhthwx的博客-CSDN博客_new option https://blog.csdn.net/hhthwx/article/details/78016289

3.2 如何实现二级联动？

1、需要再加入一个select对话框（如“国家”）option项无需在这里定义。

2、定义一个一位数组（如country）

3、获取到这个数组：var arrContinentCountry = country[一级下拉框对象.selectedIndex - 1];

4、循环这个数组，填充进二级下拉框中，就在这里用到 new Option。

<div id="id-div-center">
    <!-- 定义下拉列表框 -->
    <form name="form2sel">
        大洲:&nbsp;&nbsp;
        <select name="continent" onchange="sel_country()">
            <option value="0">选择大洲...</option>
            <option value="亚洲">亚洲</option>
            <option value="欧洲">欧洲</option>
            <option value="美洲">美洲</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        国家:&nbsp;&nbsp;
        <select name="country">
            <option value="0">选择国家...</option>
        </select>
    </form>
</div>
</body>
<script type="text/javascript">
    var country = [
        ["中国", "日本", "韩国"],
        ["英国", "德国", "法国"],
        ["美国", "巴西", "阿根廷"]
    ];

    /**
     * select country
     */
    function sel_country() {
        // TODO: 获得大洲下拉选择框对象
        var selContinent = document.form2sel.continent;
        // TODO: 获得国家下拉选择框对象
        var selCountry = document.form2sel.country;
        // TODO: 获得大洲所对应的国家数组
        var arrContinentCountry = country[selContinent.selectedIndex - 1];
        // TODO: 清空国家下拉列表框,仅保留第一个选项
        selCountry.length = 1;
        // TODO: 将国家数组中的值填充到国家下拉列表框中
        for (var i = 0; i < arrContinentCountry.length; i++) {
            selCountry[i + 1] = new Option(arrContinentCountry[i], arrContinentCountry[i]);
        }
    }
</script>

4、三级联动下拉列表框

在二级下拉框的基础上，加入city下拉框，和相应的方法。但是如何实现第三级的联动呢？

方法是：city数组是二维数组，并且，这个二维数组的定义是由一级“大洲”下拉框的selectedIndex属性值获取大洲对应的国家，

由二级“国家”下拉框的selectedIndex属性值获取国家对应的城市。

var arrCountryCity = city[selContinent.selectedIndex - 1][selCountry.selectedIndex - 1];

<div id="id-div-center">
    <!-- 定义下拉列表框 -->
    <form name="form3sel">
        大洲:&nbsp;&nbsp;
        <select name="continent" onchange="sel_country()">
            <option value="0">选择大洲...</option>
            <option value="亚洲">亚洲</option>
            <option value="欧洲">欧洲</option>
            <option value="美洲">美洲</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        国家:&nbsp;&nbsp;
        <select name="country" onchange="sel_city()">
            <option value="0">选择国家...</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        城市:&nbsp;&nbsp;
        <select name="city">
            <option value="0">选择城市...</option>
        </select>
    </form>
</div>
</body>
<script type="text/javascript">
    var country = [
        ["中国", "日本", "韩国"],
        ["英国", "德国", "法国"],
        ["美国", "巴西", "阿根廷"]
    ];
    var city = [
        [["北京", "上海", "广州"], ["东京", "大阪", "名古屋"], ["首尔", "仁川", "济州"]],
        [["伦敦", "曼彻斯特", "利物浦"], ["柏林", "慕尼黑", "法兰克福"], ["巴黎", "里尔", "摩纳哥"]],
        [["华盛顿", "纽约", "洛杉矶"], ["里约热内卢", "圣保罗", "巴西利亚"], ["布宜诺斯艾利斯", "萨尔多瓦", "罗萨里奥"]]
    ];

    /**
     * select country
     */
    function sel_country() {
        // TODO: 获得大洲下拉选择框对象
        var selContinent = document.form3sel.continent;
        // TODO: 获得国家下拉选择框对象
        var selCountry = document.form3sel.country;
        // TODO: 获得城市下拉选择框对象
        var selCity = document.form3sel.city;
        // TODO: 获得大洲所对应的国家数组
        var arrContinentCountry = country[selContinent.selectedIndex - 1];
        // TODO: 清空国家下拉列表框,仅保留第一个选项
        selCountry.length = 1;
        // TODO: 清空城市下拉列表框,仅保留第一个选项
        selCity.length = 1;
        // TODO: 将国家数组中的值填充到国家下拉列表框中
        for (var i = 0; i < arrContinentCountry.length; i++) {
            selCountry[i + 1] = new Option(arrContinentCountry[i], arrContinentCountry[i]);
        }
    }
    /**
     * select city
     */
    function sel_city() {
        // TODO: 获得大洲下拉选择框对象
        var selContinent = document.form3sel.continent;
        // TODO: 获得国家下拉选择框对象
        var selCountry = document.form3sel.country;
        // TODO: 获得城市下拉选择框对象
        var selCity = document.form3sel.city;
        // TODO: 获得大洲所对应的国家数组 !!注意这是二维数组
        var arrCountryCity = city[selContinent.selectedIndex - 1][selCountry.selectedIndex - 1];
        // TODO: 清空国家下拉列表框,仅保留第一个选项
        selCity.length = 1;
        // TODO: 将国家数组中的值填充到国家下拉列表框中
        for (var i = 0; i < arrCountryCity.length; i++) {
            selCity[i + 1] = new Option(arrCountryCity[i], arrCountryCity[i]);
        }
    }
</script>

5、可输入的下拉列表框

思路：先将一个文本框覆盖在一个下拉框上，再将用户选择的下拉列表框填充到这个可手输的文本框中

<style type="text/css">
    body {
        text-align: center;
    }
    div#id-div-center {
        position: relative;
        width: 320px;
        height: auto;
        border: 0px solid black;
        margin: 32px auto;
        padding: 2px;
    }
    div#id-div-center span {
        overflow: hidden;
        margin-left: 100px;
        width: 18px;
    }
    div#id-div-center select {
        width: 128px;
        margin-left: -100px;
    }
    div#id-div-center input {
        position: absolute;
        width: 105px;
        height: 14px;
        left: 98px;
    }
</style>
<body>
<!-- 思路：先将一个文本框覆盖在一个下拉框上，再将用户选择的下拉列表框填充到这个可手输的文本框中 -->
<div id="id-div-center" style="">
    <span style="">
        <select id="id-sel" onchange="sel_input(this.id);">
            <option value="html">HTML</option>
            <option value="js">JavaScript</option>
            <option value="css">CSS</option>
        </select>
    </span>
    <input id="id-input" style="">
</div>
</body>
<script type="text/javascript">
    /**
     * select by input
     * @param thisid
     */
    function sel_input(thisid) {
        var sel = document.getElementById(thisid);
        var input = document.getElementById("id-input");
        input.value = sel.options[sel.selectedIndex].text;
    }
</script>