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事件列表器。在更改事件列表器的回调函数内部放置了用于更新单词文本的代码逻辑。由于“更改”事件列表器不在“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 2

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

因此，在完成循环后，newWord的值始终等于最后一个选项文本，因此，无论选择哪个选项，返回时都会{{1} }，你将获得相同的价值（即，＃34; Fish＆＃34;或＆＃34; Whale＆＃34;）。

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

Answer 3

首先，您需要为每个选项设置value属性。

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

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

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属性

4 个答案: