このコードを作成しましたが、完成させる方法がわかりません。私はオブジェクトを持っていますContactDetail
。また、プロトタイプ メソッドが 1 つありdoSomething
ます。各ContactDetail
インスタンスにoptionEl
は、html オプション要素であるプロパティがあります。いくつかのインスタンスを作成し、選択するオプションを追加しました。選択から値を選択すると、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");