JavaScript DOM操作Select下拉框

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

原创最新推荐文章于 2023-06-07 09:38:18 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #select #JS DOM操作Select下拉框

web前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用JavaScript操作HTML中Select元素的示例，包括获取已选值、更改选择项及添加新选项的方法。

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

DOM操作Select下拉框：

获取select选中的option值，修改选中的选项，添加选项option。

<body>
<script type="text/javascript">
   function show() {
        var select = document.getElementById("h");
        alert(select.value);//获取选中的值
    }
    function change() {
        var select = document.getElementById("h");
        select.options[0].selected = true;//改变选中项
    }
    function addOption() {
        var select = document.getElementById("h");
        var option = new Option("乒乓球","乒乓球");//new Option(text,value);创建Option对象。
        select.add(option);//添加选项
    }
</script>

<div id="div">
    <form action="reg.do">
        <select name="habbit" id="h">
            <option value="篮球">篮球</option>
            <option value="皮球">皮球</option>
            <option value="羽毛球">羽毛球</option>
        </select>
        <input type="button" onclick="show()" value="显示爱好">
        <input type="button" onclick="change()" value="改变爱好">
        <input type="button" onclick="addOption()" value="添加选项">
    </form>
</div>

</body>