Javascript-將click事件綁定到多個 <options> 元素

Question

我有一個選擇菜單，我想將一個單擊事件綁定到每個<option>元素。 這樣做的目的是在單擊/選擇它時將一個類添加到<option>元素。 這是我的HTML和Javascript。 我缺乏選擇<option>元素並將事件綁定到它們的方法。 任何幫助都將不勝感激。

HTML：

<div class="row">
  <div class="small-12 columns">
    <label>Select Menu
      <select id="SelectMenu">
        <option value="husker">Husker</option>
        <option value="starbuck">Starbuck</option>
        <option value="hotdog">Hot Dog</option>
        <option value="apollo">Apollo</option>
      </select>
    </label>
  </div>
</div>

Java腳本

function myFunction() {
  console.log("Click Event");
}
var options = document.getElementById('SelectMenu');
for ( var i = 0; i < options.length; i++ ) {
  console.log(options[i].value);
  options[i].addEventListener('click', myFunction, false)
}

代碼示例

Answer 1

讓我們看看您的代碼做什么：

function myFunction() {
  console.log("Click Event");
}

非常簡單，一個功能。

接下來

var options = document.getElementById('SelectMenu');

因此，為options分配了#SelectMenu元素。 好。

for ( var i = 0; i < options.length; i++ ) {
  console.log(options[i].value);
  options[i].addEventListener('click', myFunction, false)
}

現在，在這里您開始發現它有點錯誤。

您不必為其中的每個option元素添加一個偵聽器。

每次選擇另一個選項時， select元素（yout options變量）都會發出change事件。

所以你可以簡單地做

options.addEventListener('change', myFunction)

就是這樣。

如果您想知道單擊了哪個option元素，則還應該為回調函數定義一個事件參數，如下所示

function myFunction(e) {
  //e.target is the <select> element
  console.log(e.target.value);
  console.log("Click Event");
}

將類添加到clicked option元素沒有太多意義，因為您無法設置樣式。

更新：由於您始終要求將類添加到所選選項中，因此您可以執行以下操作：

function myFunction(e) {
  //e.target is the <select> element
  console.log(e.target.selectedOptions[0]);
  console.log(e.target.value);
  console.log("Click Event");
}

干杯弗雷德里克。

Answer 2

最好為選擇創建一個事件，然后檢查事件中的值

function selectClicked(id){
  console.log(id);
  myFunction() ;
}
function myFunction() {
  console.log("Click Event");
}
var options = document.getElementById('SelectMenu');
options.setAttribute("onchange", function(){selectClicked(options.value);});