how to pass a value of a select menu to the on-click event

Question

I am trying to give the selected option of a select menu to the onclick function event.The html code that what I want to do is this

<select id="tag1"onclick="selectOnclick(tag1.value)" >

But since I have to make the select menu and its options in java-script ,can anyone give me a java script code that the selected value passed to the function is a value of an select menu that is made in java-script. This is the code that I have wrote but doesn't work :

 tag=document.createElement("div")
 tag.id="tag";
 document.body.appendChild(tag);     
 tagmenu=document.createElement("select");
 tagmenu.id="tag1";
 tag.appendChild(tagmenu);
 //
 allTags=document.createElement("option");
 allTags.innerHTML="ALL";
 tagmenu.appendChild(allTags);
 tagmenu.onclick=selectOnclick(tagmenu.value);

If I had to guess, I'd say you probably want `onchange`, not `onclick`. And you probably want to use pass `document.getElementById('tag1').value` to your function. — Patrick Q, May 13 '14 at 15:16
The code that I wrote in html is the same thing i want to do in java-script.There is no html code and all of the items are made in the java-script code.I want to pass a value of an element to the onclick function event of another element in java-script. — MRNakh, May 13 '14 at 15:23
If you already have some code that you're using, you should show it. — Patrick Q, May 13 '14 at 15:29

score 2 · Accepted Answer · edited May 23 '17 at 11:44

Replace

tagmenu.onclick=selectOnclick(tagmenu.value);

with

if (tagmenu.addEventListener) {  // all browsers except IE before version 9
    tagmenu.addEventListener("click", function(){selectOnclick(tagmenu.value);}, false);
} else {
  if (tagmenu.attachEvent) {   // IE before version 9
      tagmenu.attachEvent("click", function(){selectOnclick(tagmenu.value);});
  }
}

Hat-tip/credit to this answer

DEMO

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

You can achieve the same result without needing an id on the element. Just pass in "this" to your function... Or in your case, if you only want the value, pass in "this.value":

<select onclick="doSomething(this.value)">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

function doSomething(x) {
    console.log(x);
}

Here's a fiddle.

UPDATE:

Here's an updated fiddle.

HTML:

<div id="menu"></div>

Javascript:

function doSomething(x) {
    var target = x.target;
    if (target.tagName === 'OPTION') {
        target = target.parentNode;
    }
    console.log(target.value);
}

function createMenu() {
    var menu = document.getElementById('menu'),
        select = document.createElement('select'),
        option,
        i;

    for (i = 0; i < 10; i++) {
        option = document.createElement('option');
        option.value = option.text = i;
        select.add(option);
    }
    menu.appendChild(select);
    select.onclick = doSomething;
}

createMenu();

And here are some references elsewhere on SO:

all of the menu has to be created in java-script there is no html code! — MRNakh, May 13 '14 at 15:18

how to pass a value of a select menu to the on-click event

2 Answers2

UPDATE:

HTML:

Javascript: