我的 onClick 事件没有根据用户选择的选项设置 "selectedValue" 变量？

Question

我有一个下拉框，其中填充了城市名称。当用户单击 on/selects 其中一个城市名称时，他们单击的值（或选项）将设置为变量 "selectedValue"。似乎我的 onClick 事件没有正常工作，尽管我不确定到底出了什么问题。

    var selectValues = new Array(["Auckland"],["Christchurch"],["Dunedin"],["Hamilton"],["Tauranga"],["Wellington"],["Nelson"]);
    console.log("Pre-set select menu towns: " + selectValues);

    //creates _dropList as a select menu object with an ID and Class Name
    var _dropList = document.createElement("select"); {
        _dropList.id = "selectmenu";
        _dropList.className = "selectmenu";
    }

    //loops through the array "selectValues" and adds each value (town name) to the selectmenu as an option
    for ( var i = 0; i < selectValues.length; i++ ) {
        //creates a variable "_options"
        var _options = document.createElement("option");
        //"_options" is equal to the values of "selectValues" ("selectValues" values are added to the select menu)
        _options.value = selectValues[i];
        //debugging
        console.log("Select Menu Options: " + _options.value +" - Array Value: " + i);

        _options.innerHTML = selectValues[i];
        //appends the "selectValues" values (which are now equal to "_options" to the select menu)
        _dropList.appendChild(_options);
        //on click of the select menu option...
        _options.onClick = function() {
            //checks the value of the select menu and then 
            var check = _dropList.selectedIndex;
            //make a variable called "selectedValue" and assign it the value of the users chosen option
            var selectedValue = selectValues[check];
            //sends the value of "selectedValue" to the _checkNewTown function
            _checkNewTown(selectedValue);

        }

    }

Answer 1

onclick event on option tag will fail on most versions of IE, Safari and Chrome.

Refer this question -> onclick on option tag not working on IE and chrome

var selectValues = [
  ["Auckland"],
  ["Christchurch"],
  ["Dunedin"],
  ["Hamilton"],
  ["Tauranga"],
  ["Wellington"],
  ["Nelson"]
];
console.log("Pre-set select menu towns: " + selectValues);

//creates _dropList as a select menu object with an ID and Class Name
var _dropList = document.createElement("select");

_dropList.id = "selectmenu";
_dropList.className = "selectmenu";
_dropList.addEventListener('change', function() {
  _checkNewTown(this.value);
});

//loops through the array "selectValues" and adds each value (town name) to the selectmenu as an option
for (var i = 0; i < selectValues.length; i++) {
  //creates a variable "_options"
  var _options = document.createElement("option");
  //"_options" is equal to the values of "selectValues" ("selectValues" values are added to the select menu)
  _options.value = selectValues[i];
  //debugging
  console.log("Select Menu Options: " + _options.value + " - Array Value: " + i);

  _options.innerHTML = selectValues[i];
  //appends the "selectValues" values (which are now equal to "_options" to the select menu)

  //on click of the select menu option...

  _dropList.appendChild(_options);

  document.body.appendChild(_dropList);

}

function _checkNewTown(i) {
  document.getElementById('data').innerText = i;
}

<div id='data'></div>

Answer 2

通过addEventListener()

附加函数

//with onClick event
_dropList.addEventListener('click', function() {
    // code here for after select
);

//with onChange event
_dropList.addEventListener('change', function() {
    // code here for after select
);

var selectValues = new Array(["Auckland"],["Christchurch"],["Dunedin"],["Hamilton"],["Tauranga"],["Wellington"],["Nelson"]);

console.log("Pre-set select menu towns: " + selectValues);

//creates _dropList as a select menu object with an ID and Class Name
var _dropList = document.createElement("select"); {
 _dropList.id = "selectmenu";
 _dropList.className = "selectmenu";
}

//loops through the array "selectValues" and adds each value (town name) to the selectmenu as an option
for ( var i = 0; i < selectValues.length; i++ ) {
 //creates a variable "_options"
 var _options = document.createElement("option");
 //"_options" is equal to the values of "selectValues" ("selectValues" values are added to the select menu)
 _options.value = selectValues[i];
 //debugging
 console.log("Select Menu Options: " + _options.value +" - Array Value: " + i);
  
 _options.innerHTML = selectValues[i];
 //appends the "selectValues" values (which are now equal to "_options" to the select menu)
 _dropList.appendChild(_options);
 document.body.appendChild(_dropList);
 //on click of the select menu option...
 _dropList.addEventListener('click', function() {
    //checks the value of the select menu and then 
  var check = _dropList.selectedIndex;
  //make a variable called "selectedValue" and assign it the value of the users chosen option
  var selectedValue = selectValues[check];
  //sends the value of "selectedValue" to the _checkNewTown function
  _checkNewTown(selectedValue);
  }
 );
}

function _checkNewTown(val){
 console.log('selcted val ' + val);
}

<html>
<body>
 </body>
</html>

我的 onClick 事件没有根据用户选择的选项设置 "selectedValue" 变量？

My onClick event is not setting "selectedValue" variable from user selected option?

javascript

onclick