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);

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);

• javascript

Share Improve this question Follow edited May 13, 2014 at 20:44 MRNakh asked May 13, 2014 at 15:03 MRNakhMRNakh 15711 gold badge55 silver badges1515 bronze badges 4

• 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 Commented May 13, 2014 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 Commented May 13, 2014 at 15:23
• If you already have some code that you're using, you should show it. – Patrick Q Commented May 13, 2014 at 15:29
• I've post the code the last line doesn't work! – MRNakh Commented May 13, 2014 at 15:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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:

• Adding options to select with javascript
• add onclick event to newly added element in javascript
• jQuery: find the <optgroup> for a selected value in a <select> element