javascript - 如何根据所选选项调用实例方法？

Question

我编写了这段代码，但我不知道如何完成它。我有对象ContactDetail。我还有一个原型(prototype)方法doSomething。每个 ContactDetail 实例都有属性 optionEl，它是 html 选项元素。我做了一些实例并附加了其选项以供选择。现在，如果我从 select 中选择值，我想根据我的选择调用 doSomething 方法。我想做一些无需 html 更改(无 id 声明)的解决方案，并且我也将欣赏使用纯 javascript(无 jquery 数据)的解决方案。我会自己编写这个代码，但我现在没有想法。所以我向你寻求帮助。

编辑1:我完全忘了说，有时选项会被分离或附加以再次选择，因此索引不起作用。

编辑2:我必须修改我的示例，以便您可以更好地理解它。

这是 jsfiddle: http://jsfiddle.net/kkha3/

var selectDetail = $("<select />");

var ContactDetail = function(name) {
    this.name = name;    
    this.optionEl = $("<option/>").text(this.name); 
    // there are like 5 more properties
}

ContactDetail.prototype.doSomething = function() {
    console.log(this.name); // this is just a debug, that proves in example
                            // that correct instance was called, but there is no
                            // such a thing in fact
    // here I call some more things based choice
    // for example if you select contact detail address, 
    // then it puts into form more inputs (like ZIP, state, street..
}

var contactDetailList = [];
contactDetailList.push(new ContactDetail("a"));
contactDetailList.push(new ContactDetail("b"));
contactDetailList.push(new ContactDetail("c"));
contactDetailList.push(new ContactDetail("d"));
contactDetailList.push(new ContactDetail("e"));
contactDetailList.push(new ContactDetail("f"));


for (var i = 0; i < contactDetailList.length; i++) {
    contactDetailList[i].optionEl.appendTo(selectDetail);
}

selectDetail.change(function(event) {
   // how to call doSomething() on instance that is selected??
});

selectDetail.appendTo("body");

Answer 1

也许您可以使用 jQuery 的 data() 功能做一些事情。我会稍微修改您的 ContactDetail “类”，以便它将自身附加到您的选项元素:

var ContactDetail = function(name) {
    this.name = name;    
    this.optionEl = $("<option/>").text(this.name);
    // attach this ContactDetail to the option
    this.optionEl.data('contact-detail', this);
}

然后在更改处理程序中，您可以获取选定的选项元素，并从中检索 ContactDetail 类的实例:

select.change(function(event) {
   var contactDetail = $('option:selected', this).data('contact-detail');
   if (contactDetail)
       contactDetail.doSomething();
});

这使您可以完全摆脱用于构建列表的全局数组。

jsFiddle Demo