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

最新推荐文章于 2022-07-06 10:10:14 发布

VIP文章 bellediao

最新推荐文章于 2022-07-06 10:10:14 发布

阅读量260

点赞数

分类专栏：前端 #JavaScript

本文链接：https://blog.csdn.net/bellediao/article/details/107446072

版权

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">
        设置颜色:
        <s

最低0.47元/天解锁文章

bellediao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《前端》JavaScript二轮基础复习（七）--下拉列表框特效--2020年7月21日

1、程序设置下拉框的值一般用户通过下拉框手动选取自己需要的选项值，但是如不通过手动选取，能不能做到程序设置下拉框的选值呢？<div id="id-div-center"> 设置颜色:&nbsp;&nbsp; <select name="selSetColor" id="idSelSetColor"> <option>请选择...</option> <option value="
复制链接

扫一扫