This is the idea: When I click on "word1" (or "word2") the select tag shows me the options. Once I click on one of the options, my script change "word1" (or "word2") whit the option. I can update the options, but once I click on one of them the script always write the last option. The script write the same onClick attribute for all the options... I've been searching a lot but I cannot understand why it happen, and how to solve it.

Here is the code:

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>

This is the idea: When I click on "word1" (or "word2") the select tag shows me the options. Once I click on one of the options, my script change "word1" (or "word2") whit the option. I can update the options, but once I click on one of them the script always write the last option. The script write the same onClick attribute for all the options... I've been searching a lot but I cannot understand why it happen, and how to solve it.

Here is the code:

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>

Thanks in advance

• javascript
• onclick
• html-select

• 1 i think you must use the onchange attribute on select to perform your action – Genosite Commented Feb 24, 2015 at 15:20
• 1 thank you, I solved using the onchange attribute – TTK Commented Feb 25, 2015 at 23:07

4 Answers 4

You can not bind 'click events' on 'options' property of a 'select box'. You will need to bind a onchange event listner on the 'select element'. Inside the callback function of the change event listner put your code logic for updating word text. As the 'change' event listner is not in the scope of 'updatemyselect' function, you can store the last clicked element in a variable and use the same in the callback function for updating the desired word text. Please refer to the below code which I have edited.

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>

The reason why you are always getting the last option value is because you are using the newWord variable in your onclick function instead of an actual value, or reference to the currently selected option.

As a result, after you have finished going through the loop, the value of newWord is always equal to the last option text, so, regardless of which option is selected, when you are returning newWord, you will get the same value (i.e., either, "Fish" or "Whale").

Instead, try using currentElement.innerHTML = mySelect.value; in the onclick function.

First you need to set the value attribute on each option.

After you can use the onChange event on Select to display your value.

You can use Jquery to do this, its more easy jquery select change event get selected option

Thanks to everybody. I didn't realize that currentElement.innerHTML = newWord; was actually giving the value of the same variable to every onClick attribute. I finally solved in this way, even if I think the solution of Arun Singh is better.

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>