javascript - 无法将默认值绑定(bind)到 knockoutJS 中的下拉菜单

Question

我有两个下拉列表(PrimarySpeciality、PrimarySubSpeciality)，根据一个下拉列表(PrimarySpeciality)中的值，另一个下拉列表(PrimarySubSpeciality)值应该更改。

加载时，我希望加载时的“PrimarySubSpecialities”为默认值。

我该怎么做？

我的cshtml:

 <div class="nmc-righttab" style="width:265px;">
  @Html.DropDownListFor(m => m.User.PSpecialty, Model.PSpecialties, new { id = "ddUserDetails", style = "width:245px;height:25px;",  data_bind = "event: {change: primaryChanged}" }, Model.IsReadOnly)
      </div>
 <div  style="width:265px;">
    @Html.DropDownListFor(m => m.User.PSubSpecialty,Model.PSubspecialties, new { id = "ddUserDetailsPSubSpeciality", style = "width:245px;height:25px;",  data_bind = "options: pSubSpecialities,optionsText: 'Name',optionsValue: 'Id',value:PSubspecialty,enable:isPSpecialitySelected" })
   </div>

我的 JS 文件:

    this.PSubspecialty = ko.observable($('#ddUserDetails').val());
    this.pSubSpecialities = ko.observableArray([]);
    this.isPSpecialitySelected = ko.observable(false);

    this.pSpecilaityChanged = function () {

        var pSpecialityVal = $("#ddUserDetails").val();
        if (pSpecialityVal) {
            model.isPSpecialitySelected(true);
            pStartIndex = 0;
            pSubSpecialityUrl = '/User/GetSpec?pSpeciality=' + pSpecialityVal +'&sSpeciality=';
            loadPSubSpecilaities();
        }
        else
        {
            model.isSelected(false);
        }
    };

加载时，我想将“pSubSpeciality”的初始值设置为文本“<>”，值为“0”。

即使我能够将项目添加到 Model.PSubSpecialties，但无法在 psubspeciality 下拉列表中显示添加的项目。

如何从 Model.PSubSpecialities 将初始值设置为 pSubSpecialityDropdown。

Answer 1

更多地在模型中工作，更少地使用 UI。不是在 DropDownList 项上创建 changed 事件，而是订阅在 value 绑定(bind)变量上的更改。在您的主要专业下拉列表中，

data_bind = "value: primarySpecialty"

然后在你的JS中:

var self = this;    
this.primarySpecialty = ko.observable();
this.isPrimarySpecialtySelected = ko.pureComputed(function () {
    return !!self.primarySpecialty();
});
this.primarySubSpeciality = ko.observable();
//...
this.primarySpecialty.subscribe(function (newValue) {
    if (newValue) {
        loadPrimarySubSpecialities();
        this.primarySubSpeciality('0'); // Set default, by value
    }
});

如果 PrimarySubSpeciality 下拉列表中有一个 Id 成员为“0”的选项，则将在其中选择该项目。