我的onClick事件没有设置“;selectedValue"用户选择的选项中的变量

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

本文关键字：变量 quot 用户 选择 选项 selectedValue 事件 onClick 设置 我的      更新时间：2023-09-26

我有一个用城市名称填充的下拉框。当用户点击/选择其中一个城市名称时，他们点击的值（或选项）将被设置为变量"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);
        }
    }

选项标签上的onclick事件在大多数版本的IE、Safari和Chrome上都会失败。

请参阅此问题->onclick上的选项标签不适用于IE和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>

通过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>

相关文章：