0

我制作了这段代码，但我不知道如何完成它。我有对象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");
4

3 回答 3

2

也许你可以用 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 演示

于 2013-11-11T12:41:59.867 回答
1

你可以这样做：

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

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

于 2013-11-11T12:42:39.320 回答
0

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

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

这里的小提琴

于 2013-11-11T13:47:24.903 回答