创建onClick属性选项

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

在此先感谢

来源

2015-02-24 TTK

我认为你必须使用上选择的onchange属性来执行你的行动 – Genosite 2015-02-24 15:20:36

谢谢，我解决了使用onchange属性 – TTK 2015-02-25 23:07:47

您无法在“选择框”的“选项”属性上绑定“点击事件”。您将需要绑定'选择元素'上的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>

来源

2015-02-24 16:21:56 Arun

您绝对可以将点击事件绑定到选项。这是最好的方法吗？没有（当然可以），但它确实有效。他只需要正确地获得选项的价值。 – talemyn 2015-02-24 17:07:39

首先，你需要设置每个选项的值属性。

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

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

来源

2015-02-24 15:27:56 Genosite

1）如果没有'为value'属性的'

创建onClick属性选项

回答