建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
下拉列表框onchange事件示例
下拉列表框（Select）是HTML中的一個(gè)表單元素，用于讓用戶選擇一個(gè)或多個(gè)選項(xiàng)，當(dāng)用戶從下拉列表中選擇一個(gè)選項(xiàng)時(shí)，可以觸發(fā)一個(gè)事件，這個(gè)事件就是onchange事件。
下面是一個(gè)使用onchange事件的下拉列表框示例：
1、創(chuàng)建一個(gè)HTML文件，然后在文件中添加一個(gè)下拉列表框和一個(gè)按鈕，下拉列表框的id為"mySelect"，按鈕的id為"myButton"。
下拉列表框 onchange 事件示例
2、接下來，創(chuàng)建一個(gè)JavaScript文件（script.js），并在文件中編寫一個(gè)函數(shù)，該函數(shù)將在onchange事件觸發(fā)時(shí)執(zhí)行，在這個(gè)例子中，我們將在控制臺中打印所選選項(xiàng)的值。
function handleOnChange() {
var selectedOption = document.getElementById("mySelect").value;
console.log("選中的選項(xiàng)值為：" + selectedOption);
}
3、將onchange事件與上面創(chuàng)建的handleOnChange函數(shù)關(guān)聯(lián)起來，為此，需要獲取下拉列表框和按鈕的元素，并將handleOnChange函數(shù)作為onchange事件的處理程序，還需要為按鈕添加一個(gè)onclick事件，以便在用戶點(diǎn)擊按鈕時(shí)觸發(fā)onchange事件。
document.getElementById("mySelect").addEventListener("change", handleOnChange);
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("mySelect").dispatchEvent(new Event("change"));
});
現(xiàn)在，當(dāng)用戶從下拉列表中選擇一個(gè)選項(xiàng)或點(diǎn)擊按鈕時(shí)，handleOnChange函數(shù)將在控制臺中打印所選選項(xiàng)的值。
文章名稱：下拉列表框onchange事件示例
鏈接地址：http://www.fisionsoft.com.cn/article/dhhiidc.html
