创建选项 onClick 属性

Question

这是我的想法：当我点击 "word1"（或 "word2"）时，select 标签会向我显示选项。单击其中一个选项后，我的脚本会更改 "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>

提前致谢

Answer 1

首先您需要在每个选项上设置值属性。

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

你可以用Jquery来做这个，比较简单 jquery select change event get selected option

Answer 2

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

因此，在您完成循环后，newWord 的值始终等于最后一个选项文本，因此，无论选择哪个选项，当您返回 newWord，您将获得相同的值（即 "Fish" 或 "Whale"）。

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

Answer 3

您不能在 'select box' 的 'options' 属性上绑定 'click events'。您需要在 'select element' 上绑定一个 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>

Answer 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>

创建选项 onClick 属性

Create options onClick attribute

javascript

select

options

onclick