私は knockoutjs を使用しており、2 つのドロップダウン ボックスがあります。それらの1つは他のものに依存しています。これだけでも問題なく動作しますが、初期値とその選択値を設定したいと思います。
最初のドロップダウン ボックスの変更をサブスクライブして 2 番目のドロップダウン ボックスをロードするので、データを 2 回ロードするだけでなく、2 番目のドロップダウン ボックスでの最初の選択も失われます。この理由は、最初のドロップダウンの値が変更されるたびに、2 番目のドロップダウンの選択をクリアする必要があるためです。そうしないと、間違った値が事前に選択される可能性があります。
参照: http://jsfiddle.net/sturm/6Mp33/31/
<select name="model" data-bind="options: models, value: selectedModel, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Choose...'"></select>
<select name="makes" data-bind="options: makes, value: selectedMake, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Choose...'"></select>
function viewModel(initialModels, initialSelectedModel, initialMakes, initialSelectedMake) {
var self = this;
self.models = ko.observableArray(initialModels);
self.selectedModel = ko.observable(initialSelectedModel);
self.makes = ko.observableArray(initialMakes);
self.selectedMake = ko.observable(initialSelectedMake);
self.selectedModel.subscribe(function() {
// This runs after the initial data and clears the selection
if (self.selectedModel()) {
$.ajax({
type: 'POST',
url: '/echo/json/',
data: {
json: ko.toJSON(makeData[self.selectedModel()-1])
},
context: this,
success: function(data) {
self.makes(data);
// The folowing line is the problem
self.selectedMake(undefined);
},
dataType: 'json'
});
} else {
self.makes.removeAll();
}
});
};
ko.applyBindings(new viewModel(modelData, 2, makeData[1], 2));
2 回ロードして選択を維持することなく、初期値をきれいに設定するにはどうすればよいでしょうか?