选择下拉值的值时，将默认选项添加到某些控件中

Question

我有两个下拉列表和一个输入框。当从下拉列表中选择一个值时，应在其他两个控件中预先选择特定值。

这是我的淘汰码：

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>  

选择模板2时，应从语言中选择西班牙语选择列表，并且模板的名称应写入foldername Inputbox（Template2）。 选择 Template1 时，应预先选择法语，并将模板名称写入 folderName 输入框（Template1）

小提琴：http://jsfiddle.net/PsyComa/Q8unN/19/

我对 javascript 比较陌生，对于工作示例的每一个帮助都会非常感激。谢谢！

Answer 1

这是更通用的代码。如果您使用模板语言对填充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);