Как вызвать метод экземпляра на основе выбранной опции?

0

Я сделал этот код, но не знаю, как его закончить. У меня есть объект ContactDetail. Также у меня есть один прототип метода doSomething. Каждый экземпляр ContactDetail имеет свойство optionEl которое является элементом опции html. Я сделал несколько экземпляров и добавил свои варианты для выбора. Теперь, если я выберу значение из select, я хочу вызвать метод doSomething основанный на моем выборе. Я хотел бы сделать какое-то решение без изменений html (без деклараций id), а также я по достоинству оценят решение с чистым javascript (без данных jquery). Я бы это сделал сам по себе, но Im из идей прямо сейчас. Поэтому я прошу вас о помощи.

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");
  • 2
    Просто предложение не использовать select как имя переменной. Ссылка javascripter.net/faq/reserved.htm
  • 0
    @ Satpal спасибо, что ты прав. На самом деле мой собственный код намного длиннее, а имена совершенно разные. Это всего лишь короткий пример. Но примеры тоже должны быть правильными;)
Теги:

3 ответа

2
Лучший ответ

Возможно, вы можете что-то сделать с помощью функции jQuery data(). Я бы немного ContactDetail ваш класс ContactDetail чтобы он присоединился к вашему элементу option:

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

А потом в вашем обработчике изменений вы можете получить выбранный элемент option и извлечь из него экземпляр класса ContactDetail:

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

Это дает вам полную свободу от этого глобального массива, который вы использовали для создания своего списка.

jsFiddle Demo

Поделиться
  • 0
    Хотя я не хотел использовать данные JQuery, но это, вероятно, лучшее решение.
1

Вы можете сделать это:

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

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

Поделиться
  • 0
    Мне нравится ваше решение. Но я совершенно забыл сказать одну вещь. Параметры Somethimes отсоединяются и снова добавляются в выбор. Итак, индексы не работают. Но я подумаю, можно ли это как-нибудь сделать.
  • 0
    @Windkiller: Мое решение работает без индексов (Мета, извините, что взломал ваш ответ).
Показать ещё 1 комментарий
0

Я добавил событие click на этот параметр, возможно, это поможет вам:

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

здесь скрипка

Поделиться
  • 0
    Неплохая идея. Но решение не работает в каждом браузере. Я думаю, что другое событие (не клик) должно быть там.
  • 0
    какой это не работает?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню