Question

一直在寻找这几天，这让我疯狂。对于JS来说，我是半新手，请原谅下面的丑陋脚本。

我有一个表单，我选择了一个选项，然后根据选择它决定了以下可用的答案。

示例和目标：选择国家：加拿大（工作）＆lt; -onclick = function（）来填充省选择框选择省：安大略省（工作）＆lt; -dynamically添加选项，onclick = function（）向县添加选项是问题所在。我无法为选项列表中的每个项添加特定的onclick函数。选择县：

function Province()
{
    var Province= document.getElementById("prov");
    Province.hidden = false; //unhiding the province box
    Province.options[Province.options.length] = new Option('Ontario', 'ont'); 
    Province.options[Province.options.length] = new Option('Manitoba', 'man');
        onchange = function()
        {
            var County= document.getElementById("county");
            County.hidden = false; // unhiding the county box
            Province.disabled = true; //disabling the province box
        }
 }

在它说出新选项之后我想添加.onclick（cityfunction（）），但这不起作用。任何帮助将不胜感激。（我知道我可以用一种更简单的方法将元素添加到我的列表中 - 再次，菜鸟的事情）。如果.add与onclick事件一起工作，我将很乐意翻转。

Answer 1

嗯，你不能绑定onclick选项并取其值，至少不是正常选择 - ＆gt;选项。

您有以下几种选择：1。设置一个创建假选择的外部库，选项为<li> s。

2.进行更改并使用键创建一个类 - ＆gt;可以动态添加的值。然后改变 - ＆gt;接受价值并处理班级。

我个人喜欢http://gregfranko.com/jquery.selectBoxIt.js/很好。

但是，如果你完善了更复杂的方式：

onChangeClass = function(){
    this.options = [
          {"value" : "something", actionToTake: function(){/* ....  */}}
    ];
    this.doCall = function(selected){
         $.each(this.options,function(index,value){
              if(selected == value.value){
                   value.actionToTake();
              }
         });
    }
}

 var somVar = new onChangeClass ();
 somVar.options.push({"value" : "something2", actionToTake: function(){/* ....  */}});
 somVar.doCall();

Answer 2

要为动态添加内容添加onclick处理程序，通常应该这样：

Province.options[Province.options.length] = new Option('Manitoba', 'man');
Province.options[Province.options.length].onclick = function(e) {
     // event handling code here
}

但正如有人提到的那样，我依稀记得自己遇到这样的问题;有可能在HTML select元素内的option元素上添加onclick事件处理程序是不可能的。搜索会带来类似的问题......

在这种情况下，我要做的是尝试将处理程序绑定到select onchange事件（select元素上的onclick也可以工作......）。 Province.onchange = function(e){}在其中，您可以访问当前所选选项等变量......这确实会使事情变得更复杂。

这是关于stackoverflow的一个看似相似的问题：
getting an onclick event to a select option using js

这是一个小型图书馆，试图提供解决方法：
http://code.google.com/p/expandselect/

搜索 html选择选项onclick （在Google上）会提出其他类似问题。

希望有帮助...

JS - 用于在select中动态添加选项的Onclick处理程序

2 个答案: