Question

我正在尝试设置一个测试功能，当用户点击<select>元素中的特定选项时会显示警告：

<script>
function test() {
    var body = document.getElementById("body");
    var select = document.createElement("select");
    var defaultOpt = document.createElement("option");
    defaultOpt.label = "Default Option";
    var mainOpt = document.createElement("option");
    mainOpt.label = "Click this option";

    mainOpt.onClick = alert("It works!");

    select.appendChild(defaultOpt);
    select.appendChild(mainOpt);
    body.appendChild(select);
}
</script>

<body id="body">
    <input type="button" value="Start" onclick="test();" />
</body>

但是，只有当我单击“开始”按钮时才显示警报，而不是在我单击选择中的指定选项时。谁能告诉我如何正确设置它？

Answer 1

您可以使用selectElement.onchange事件。这可能要求您的选择元素在某些较旧的浏览器中失去焦点以触发事件。

//<![CDATA[
// common.js
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
//]]>

//<[CDATA[
// yourpage.js
function test(){
  var sel = doc.createElement('select'), defaultOpt = doc.createElement('option');
  var mainOpt = doc.createElement('option');
  defaultOpt.value = defaultOpt.label = 'Default Option';
  mainOpt.value = mainOpt.label = 'Click this option';
  sel.appendChild(defaultOpt); sel.appendChild(mainOpt);
  sel.onchange = function(){
    if(this.value === defaultOpt.value){
      alert('It Works!');
    }
  }
  bod.appendChild(sel);
}
test();
//]]>

或者只是注意JavaScript事件应该是小写的。请注意，您有onClick，其中应为onclick。此外，要处理类似的警报，您应该将其放在匿名函数中，例如：

 mainOpt.onclick = function(){
   alert('It Works!');
 }

单击选择中的选项后如何触发事件？

1 个答案: