Question

我制作了这段代码，但我不知道如何完成它。我有对象ContactDetail。我还有一个原型方法doSomething。每个ContactDetail实例都有属性optionEl，它是html选项元素。我做了几个实例并附加了它的选项以供选择。现在如果我从select中选择值，我想根据我的选择调用doSomething方法。 我想在没有html更改的情况下做一些解决方案（没有id声明），我也很欣赏纯javascript（没有jquery数据）的解决方案。 我会自己编码，但我现在没有想法。所以我请你帮忙。

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

EDIT2： 我不得不修改我的例子，所以你可以更好地理解它。

这是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

Answer 2

你可以这样做：

select.change(function(event) {
   var selectedIndex = this.selectedIndex;
   contactDetailList[selectedIndex].doSomething();
});

JSFiddle：http://jsfiddle.net/kkha3/12/

Answer 3

我在该选项上添加了一个点击事件，也许这会对您有所帮助：

var selectDetail = $("<select />");
var ContactDetail = function(name) {
    var _this = this;
    _this.name = name;    
    _this.optionEl = $("<option/>").text(this.name);
    _this.optionEl.click(function(){
        _this.doSomething(_this)
    });
}

ContactDetail.prototype.doSomething = function(obj) {
    console.log(obj.name); 
}

这里是fiddle

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

3 个答案: