Question

我有一个填充了城市名称的下拉框。当用户点击/选择其中一个城市名称时，他们点击的值（或选项）将被设置为变量“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事件将在大多数版本的IE，Safari和Chrome上失败。

参考此问题 - ＆gt; 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”变量？

2 个答案: