html下拉框怎么用js添加新值

JavaScript014

html下拉框怎么用js添加新值,第1张

html下拉框怎么用js添加新值

javascript添加一个下拉列表项的方法:创建一个新的option节点,然后添加到目标select对象中去,关键代码如下:

1、var objSelect = document.getElementById(select_id)。

2、var new_opt = new Option(objItemText, objItemValue)。

3、objSelect.options.add(new_opt)。

实例演示如下:

1、HTML结构,包括一个select项,含有三个options。另外,设置input和button,通过自由父子,实现给select增加自定义option。

此时的显示效果如下,其中option中有三项。

2、JS的函数设计如下:

现有的options如下:

3、在页面上输入新的数据,点击添加。

此时的select效果显示如下,自由添加功能实现。

HTML:

<!DOCTYPE html>

<html>

    <head>

        <title>Dropdown</title>

        <link rel="stylesheet" href="style.css">

        <meta charset="utf-8" />

    </head>

    <body>

        <ul>

            <li class="dropdown">

                <a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a>

                <div class="dropdown-content" id="dropdown-a">

                    <a href="#">下拉 1</a>

                    <a href="#">下拉 2</a>

                    <a href="#">下拉 3</a>

                </div>

            </li>

            <li class="dropdown">

                <a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a>

                <div class="dropdown-content" id="dropdown-b">

                    <a href="#">下拉 1</a>

                    <a href="#">下拉 2</a>

                    <a href="#">下拉 3</a>

                </div>

            </li>

        </ul>

        <script src="script.js"></script>

    </body>

</html>

CSS (style.css):

body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif

}

ul {

    list-style-type: none

    margin: 0

    padding: 0

    overflow: hidden

    background-color: #333

}

li {

    float: left

}

li a, .dropbtn {

    display: inline-block

    color: white

    text-align: center

    padding: 14px 16px

    text-decoration: none

}

li a:hover, .dropdown:hover .dropbtn {

    background-color: #1f75cf

}

li.dropdown {

    display: inline-block

}

.dropdown-content {

    display: none

    position: absolute

    background-color: #fafafa

    min-width: 160px

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)

}

.dropdown-content a {

    color: black

    padding: 12px 16px

    text-decoration: none

    display: block

    text-align: left

}

.dropdown-content a:hover {

    color: white

    background-color: #1f75cf

}

.show {

    display: block

}

JavaScript (script.js):

function showList(o) {

    hideList("dropdown-content" + o.id)

    document.getElementById("dropdown-" + o.id).classList.toggle("show")

}

function hideList(option) {

    var dropdowns = document.getElementsByClassName("dropdown-content")

    

    for (var i = 0 i < dropdowns.length i++) {

        var openDropdown = dropdowns[i]

        if (openDropdown.id != option) {

            if (openDropdown.classList.contains('show')) {

                openDropdown.classList.remove('show')

            }

        }

    }

}

window.onclick = function(e) {

    if (!e.target.matches('.dropbtn')) {

        hideList("")

    }

}

点击标题 A:

点击标题 B:

JSFiddle 调试:jsfiddle.net/soL73u4y/2/