首頁猿問多個選擇的一個事件處理程序

多個選擇的一個事件處理程序

JavaScript

慕仙森 2023-04-27 15:08:20

我在一個頁面上有多個選擇，如下所示：<select id="select-1" class="action"> <option val=1>1</option> <option val=2>2</option></select><select id="select-2"> <option val=1>1</option> <option val=2>2</option></select><select id="select-3" class="action"> <option val=1>1</option> <option val=2>2</option></select>當更改類“action”的選擇時，我需要使用 JS 代碼執行一些操作。我可以這樣做：var elements = document.getElementsByClassName("classname");for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', myFunction, false);}但也許有更好的方法來處理這個問題。所以我的問題是：使用一個事件處理程序來處理多個選擇元素的最佳方法是什么？

查看完整描述

1 回答

不負相思意

TA貢獻1777條經驗獲得超10個贊

首先：您的 html 無效：options 元素具有 value 屬性，沒有 val，并且該值必須有引號。

所以 <option val=1>1</option>是錯誤的，

而且必須是<option value="1">1</option>

對于事件委托，您需要有一個父元素。

由于您的代碼是關于選擇元素的，因此邏輯父級應該是一個<form>元素。

對于選擇，主要事件是更改事件，而不是點擊事件

最后一點，所有表單元素都必須有一個名稱，這個名稱在提交表單時使用，而不是 id。

在表單中使用 name 屬性的另一個好處是它們可以直接用于引用表單的任何子元素

所以完整的代碼是：

const myForm = document.forms['my-form']

// get any -change- event on all the form

myForm.addEventListener('change', myFunction, false)

// event delegation function

function myFunction(evt)

{

// ignore other cases:

if (!evt.target.matches('select.action')) return

console.clear()

console.log( 'change on :', evt.target.name )

console.log( 'value is', myForm[evt.target.name].value )

}

// disable form submit

myForm.onsubmit =evt=>evt.preventDefault()

</select>

</select>

</select>

</form>

反對回復 2023-04-27

1 回答
0 關注
117 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

多個選擇的一個事件處理程序

多個選擇的一個事件處理程序

1 回答

添加回答