如何将选择菜单的值传递给点击事件

时间:2014-05-13 15:03:20

标签: javascript

我试图将选择菜单的选定选项提供给onclick函数事件。我想要做的HTML代码就是这个

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

但是由于我必须在java脚本中创建选择菜单及其选项,任何人都可以给我一个java脚本代码,传递给函数的选定值是在java脚本中生成的选择菜单的值。 这是我写过的代码但不起作用的代码:

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

2 个答案:

答案 0 :(得分:1)

您可以在元素上不需要id的情况下获得相同的结果。只需将“this”传递给您的函数......或者在您的情况下,如果您只想要该值,请传入“this.value”:

<select onclick="doSomething(this.value)">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
function doSomething(x) {
    console.log(x);
}

这是fiddle

UPDATE:

这是一个更新的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();

以下是关于SO的其他参考文献:

答案 1 :(得分:1)

替换

tagmenu.onclick=selectOnclick(tagmenu.value);

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

this answer

的帽子/功劳

DEMO