JavaScript DOM操作Select下拉框

最新推荐文章于 2023-09-18 16:11:21 发布

benxiaohai888

最新推荐文章于 2023-09-18 16:11:21 发布

阅读量2.1k

点赞数

分类专栏： web前端文章标签： javascript select JS DOM操作Select下拉框

本文链接：https://blog.csdn.net/benxiaohai888/article/details/78234857

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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" οnclick="show()" value="显示爱好">
        <input type="button" οnclick="change()" value="改变爱好">
        <input type="button" οnclick="addOption()" value="添加选项">
    </form>
</div>

</body>

benxiaohai888

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM操作Select下拉框

DOM操作Select下拉框：获取select选中的option值，修改选中的选项，添加选项option。 function show() { var select = document.getElementById("h"); alert(select.value);//获取选中的值 } function change() {
复制链接

扫一扫