创建选项 onClick 属性答案

【问题标题】：Create options onClick attribute创建选项 onClick 属性
【发布时间】：2015-02-24 15:15:11
【问题描述】：

这就是想法：当我点击“word1”（或“word2”）时，选择标签会显示选项。单击其中一个选项后，我的脚本将更改“word1”（或“word2”）选项。我可以更新选项，但是一旦我单击其中一个，脚本总是会写入最后一个选项。该脚本为所有选项编写相同的 onClick 属性... 我一直在寻找很多，但我不明白为什么会发生，以及如何解决它。

代码如下：

function updatemyselect(currentElement, optionsList) {
  var mySelect = document.getElementById("mySelect");
  var i;

  //Clear the options
  mySelect.options.length = 0;

  //Add the options
  for (i = 0; i < optionsList.length; i++) {
    var option = document.createElement("option");
    var newWord = optionsList[i]
    option.text = newWord;
    option.onclick = function() {
      currentElement.innerHTML = newWord;
    };
    mySelect.add(option);
  }

}

<select id="mySelect">
</select>


<p onclick="updatemyselect(this,['Dog','Cat','Fish'])" class="changedWord">Word1</p>

<p onclick="updatemyselect(this,['Cow','Horse','Whale'])" class="changedWord">Word2</p>

提前致谢

【问题讨论】：

我认为您必须在 select 上使用 onchange 属性来执行您的操作
谢谢，我用onchange属性解决了

标签： javascript select onclick options

【解决方案1】：

您不能在“选择框”的“选项”属性上绑定“点击事件”。您需要在“选择元素”上绑定一个 onchange 事件监听器。在更改事件侦听器的回调函数中，将您的代码逻辑用于更新单词文本。由于 'change' 事件列表器不在 'updatemyselect' 函数的范围内，您可以将最后点击的元素存储在一个变量中，并在回调函数中使用它来更新所需的单词文本。请参考我编辑的以下代码。

var clickedElement;
function updatemyselect(currentElement, optionsList) {
  clickedElement = currentElement;
  var mySelect = document.getElementById("mySelect");
  var i;

  //Clear the options
  mySelect.options.length = 0;

  //Add the options
  for (i = 0; i < optionsList.length; i++) {
    var option = document.createElement("option");
    var newWord = optionsList[i]
    option.text = newWord;
    /*option.onclick = function() {
      currentElement.innerHTML = newWord;
    };*/
    mySelect.add(option);
  }
}

document.getElementById("mySelect").addEventListener("change", updatePTag);

function updatePTag(){
    clickedElement.innerHTML = this.value;
  };

<select id="mySelect">
</select>


<p onclick="updatemyselect(this,['Dog','Cat','Fish'])" class="changedWord">Word1</p>

<p onclick="updatemyselect(this,['Cow','Horse','Whale'])" class="changedWord">Word2</p>

【讨论】：

您绝对可以将点击事件绑定到选项。这是最好的方法吗？不（可以说，当然），但它确实有效。他只需要正确获取期权的价值。

【解决方案2】：

您总是获得最后一个选项值的原因是因为您在 onclick 函数中使用了 newWord 变量而不是实际值，或者引用当前选定的选项。

因此，当你完成循环后，newWord 的值总是等于最后一个选项文本，所以，无论选择哪个选项，当你返回 newWord 时，你都会获得相同的值（即“Fish”或“Whale”）。

请尝试在onclick 函数中使用currentElement.innerHTML = mySelect.value;。

【讨论】：

【解决方案3】：

首先你需要在每个选项上设置 value 属性。

您可以在 Select 上使用 onChange 事件来显示您的值。

您可以使用 Jquery 来做到这一点，它更容易 jquery select change event get selected option

【讨论】：

1) 如果<option> 没有value 属性，则默认为显示文本。 2) 同时，我也会在<select> 上使用onchange 事件，只要他改变从选项中获取价值的方式，他的设置方式就可以工作。

【解决方案4】：

感谢大家。我没有意识到currentElement.innerHTML = newWord; 实际上将相同变量的值赋予每个 onClick 属性。我终于这样解决了，虽然我觉得Arun Singh的解决方案更好。

function updatemyselect(currentElement, optionsList) {
  var mySelect = document.getElementById("mySelect");
  var i;
  mySelect.onchange= function() {currentElement.innerHTML=mySelect.value;};
  //Clear the options
  mySelect.options.length = 0;

  //Add the options
  for (i = 0; i < optionsList.length; i++) {
    var option = document.createElement("option");
    var newWord = optionsList[i];
    option.text = newWord;
    mySelect.add(option);
  }

}

<select id="mySelect">
</select>


<p onclick="updatemyselect(this,['Dog','Cat','Fish'])" value="a">Word1</p>

<p onclick="updatemyselect(this,['Cow','Horse','Whale'])" value="b">Word2</p>

【讨论】：