Create options onClick attribute

Question

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

i think you must use the onchange attribute on select to perform your action — Genosite, Feb 24 '15 at 15:20

score 4 · Accepted Answer · answered Feb 24 '15 at 16:21

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>

You absolutely can bind click events to the options. Is it the best approach? No (arguably, of course), but it does work. He just needs to get the value of the option correctly. — talemyn, Feb 24 '15 at 17:07

talemyn · Answer 2 · 2015-02-24T15:59:28.437

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.

score 1 · Answer 3 · edited May 23 '17 at 12:23

1

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

edited May 23 '17 at 12:23

Community

1
1

answered Feb 24 '15 at 15:27

Genosite

359
1
8

1

1) If there is no `value` attribute for an ` – talemyn Feb 24 '15 at 16:08

score 1 · Answer 4 · answered Feb 25 '15 at 23:45

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>

Create options onClick attribute

4 Answers4