下拉列表框onchange事件示例

下拉列表框（Select）是HTML中的一个表单元素，用于让用户选择一个或多个选项，当用户从下拉列表中选择一个选项时，可以触发一个事件，这个事件就是onchange事件。

下面是一个使用onchange事件的下拉列表框示例：

1、创建一个HTML文件，然后在文件中添加一个下拉列表框和一个按钮，下拉列表框的id为"mySelect"，按钮的id为"myButton"。

    
    
    


    
        选项1
        选项2
        选项3
    
    点击我
    

2、接下来，创建一个JavaScript文件（script.js），并在文件中编写一个函数，该函数将在onchange事件触发时执行，在这个例子中，我们将在控制台中打印所选选项的值。

function handleOnChange() {
    var selectedOption = document.getElementById("mySelect").value;
    console.log("选中的选项值为：" + selectedOption);
}

3、将onchange事件与上面创建的handleOnChange函数关联起来，为此，需要获取下拉列表框和按钮的元素，并将handleOnChange函数作为onchange事件的处理程序，还需要为按钮添加一个onclick事件，以便在用户点击按钮时触发onchange事件。

document.getElementById("mySelect").addEventListener("change", handleOnChange);
document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("mySelect").dispatchEvent(new Event("change"));
});

现在，当用户从下拉列表中选择一个选项或点击按钮时，handleOnChange函数将在控制台中打印所选选项的值。

分享题目：下拉列表框onchange事件示例
文章路径：http://www.shufengxianlan.com/qtweb/news22/359472.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联