0

2つのドロップダウンリストと1つの入力ボックスがあります。ドロップダウンリストから値を選択する場合、他の2つのコントロールで特定の値を事前に選択する必要があります。

これが私のノックアウトコードです：

var viewModel = {
    templates: ko.observableArray(["Template1", "Template2"]),
    //when Template2 is selected Spanish should be preselected from the languages select list and name of the template should be written in the folderName inputbox (Template2)
    //when Template1 is selected French should be preselected and name of the template should be written in the folderName inputbox (Template1)
    languages: ko.observableArray(["English", "Spanish", "French"]),
    folderName: ko.observable()
}

ko.applyBindings(viewModel);

これが私のサンプルhtmlコードです：

<select id="templates" data-bind="options: templates"></select>

<div>
<input data-bind="value: folderName"/>
</div>

<div>
<select id="languages" data-bind="options: languages"></select>
</div>

Template2を選択する場合は、言語選択リストからスペイン語を事前に選択し、テンプレートの名前をfolderName入力ボックス（Template2）に書き込む必要があります。Template1を選択する場合は、フランス語を事前に選択し、テンプレートの名前をfolderName入力ボックス（Template1）に書き込む必要があります。

フィドル： http： //jsfiddle.net/PsyComa/Q8unN/19/

私はjavascriptにかなり慣れていないので、実例に関するすべてのヘルプが非常に高く評価されます。ありがとう！

4

1 に答える 1

0

これはより普遍的なコードです。templateLanguageMapテンプレートと言語のペアを入力すると、このコードで問題が解決します。if多くのステートメントを書く必要はありません。幸運を！

<select id="templates" data-bind="options: templates"
    onchange="onTemplateChange(value);"></select>

<div>
<input id="folderName"  data-bind="value: folderName"/>
</div>

<div>
<select id="languages" data-bind="options: languages"></select>
</div>

JavaScript：

    var viewModel = {
        templates: ko.observableArray(["Template1", "Template2"]),
        //when Template2 is selected Spanish should be preselected from the languages select list and name of the template should be written in the folderName inputbox (Template2)
        //when Template1 is selected French should be preselected and name of the template should be written in the folderName inputbox (Template1)
        languages: ko.observableArray(["English", "Spanish", "French"]),
        folderName: ko.observable()
    }

    var selectTemplates = document.getElementById('templates');
    var selectLanguages = document.getElementById('languages');
    var inputFolderName = document.getElementById('folderName');

    var templateLanguageMap = {"Template1":"Spanish", "Template2":"French"};

    onTemplateChange = function(value){
        inputFolderName.value = value;
        for ( var i = 0; i < selectLanguages.options.length; i++ ) {
            if ( selectLanguages.options[i].value == templateLanguageMap[value]) {
                selectLanguages.options[i].selected = true;
                return;
            }
        }
    }

    ko.applyBindings(viewModel);
    onTemplateChange(selectTemplates.value);
于 2012-04-20T09:23:14.217 に答える