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

Question

一直在寻找几天，这使我疯狂。 关于JS，我是一个半新手，因此请原谅下面的难看脚本。

我有一个表单，在其中选择一个选项，然后根据该选择指示以下可用答案。

示例和目标：选择国家（地区）：加拿大（工作中）<-onclick = function（）填充省份选择框选择省份：安大略省（工作中）<-动态添加的选项，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绑定到选项并获取其值，至少对于普通的select-> options而言不能。

您有以下几种选择：1.获取一个外部库，该库创建一个伪选择，并且选项为<li> 。

2.进行更改，并创建一个具有键->可动态添加的值的类。 然后进行更改->获取值并处理该类。

我个人喜欢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的看似相似的问题：
使用js获取onclick事件到选择选项

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

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

希望有帮助...