淘汰赛：级联下拉菜单，第二个下拉菜单选择文本

Question

.net MVC、C#、KnockoutJS

所以我有 2 个下拉菜单。两者的数据都是通过 Ajax 从敲除到 MVC 控制器函数的调用来填充的。初始设置工作正常，在选择第一个下拉菜单时，第二个下拉菜单会填充。我需要做的是将从按钮单击事件的第二个下拉列表中选择的文本和值传递给下一个控制器。我已经尝试过 subscribe 和 onchange 但无法获得从第二个 dropdpown 中选择的值和文本。这是下面的代码：

下拉菜单 1

  <select data-bind="options: countries ,
                   optionsText: 'Name',
                   optionsValue: 'ID',
                   value: selectedCountry,
                   optionsCaption: '--Please Select--'" asp-placeholder-for="Country" asp-for="Country"   class="form-control common-input-text"></select>

下拉菜单 2

 <select data-bind="options: states ,
                optionsText: 'Name', 
                visible: ifSelected,                    
                optionsValue: 'ID',
                event: { change: selectionChanged },
                value: selectedState"
                     asp-placeholder-for="State" asp-for="State"  
                     class="form-control common-input-text"></select>

淘汰赛

(function () {
var viewModel = function (vmData) {

    var self = this;

    self.countries = ko.observableArray();
    self.selectedCountry = ko.observable();
    self.states = ko.observableArray();
    self.ifSelected = ko.observable(false);
    self.selectedState = ko.observable();    

    //Populate Country DDL
    $.ajax({
        url: rootDir + "/Home/GetCountry",
        type: "GET",
        contentType: "application/json",
        async: false,
        success: function (data) {
            self.countries(JSON.parse(data));
        }
    });

    //Populate state DDL based on country
    self.selectedCountry.subscribe(function (val) {           
        $.ajax({
            url: rootDir + "/Home/GetStates",
            type: "GET",
            data: { stateVal: val },
            contentType: "application/json",
            async: false,
            success: function (data) {
                var jsonData = JSON.parse(data); 
                self.ifSelected(true);                      
                    self.states(jsonData);                 
            }
        });            
    });

    //I have tried to subscribe to second dropdown but this function is never hit
    self.selectedState.subscribe(function (value) {


    });

    //I have tried to bind onchange event to state dropdown but the selected value is always null
       self.selectionChanged =  function(event) {
       var a = self.selectedState(); //null or udefined

    }    
};

var pageVM = new viewModel();
ko.applyBindings(pageVM, $("form")[0]);
})();

Answer 1

您发布的代码似乎没问题。 "selectedState" 保存所选项目的 ID。如果您想要整个对象而不仅仅是 ID，请考虑从状态下拉列表中删除 "optionsValue: 'ID'" 绑定。

var viewModel = function(vmData) {

  var self = this;

  self.countries = ko.observableArray();
  self.selectedCountry = ko.observable();
  self.states = ko.observableArray();
  self.ifSelected = ko.observable(false);
  self.selectedState = ko.observable();

  //Populate Country DDL
  setTimeout(function(data) {
      self.countries([{ Name: 'us', ID: 1 }, { Name: 'ca', ID: 2 }, { Name: 'mx', ID: 3 }]);    
    }, 500);

  //Populate state DDL based on country
  self.selectedCountry.subscribe(function(val) {
   console.log('country changed');
    setTimeout(function(data) {
        self.ifSelected(true);
        self.states([{ Name: 'ca', ID: 1 }, { Name: 'nv', ID: 2 }, { Name: 'tx', ID: 3 }]);    
    }, 500);
  });

  //I have tried to subscribe to second dropdown but this function is never hit
  self.selectedState.subscribe(function(value) {
    console.log('state changed');
  });

  //I have tried to bind onchange event to state dropdown but the selected value is always null
  self.selectionChanged = function(event) {
    var a = self.selectedState(); //null or udefined

  }
};

var pageVM = new viewModel();
ko.applyBindings(pageVM);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: countries ,
                   optionsText: 'Name',
                   optionsValue: 'ID',
                   value: selectedCountry,
                   optionsCaption: '--Please Select--'" asp-placeholder-for="Country" asp-for="Country" class="form-control common-input-text"></select>

<select data-bind="options: states ,
                   optionsText: 'Name', 
                   visible: ifSelected, 
                   event: { change: selectionChanged },
                   value: selectedState" asp-placeholder-for="State" asp-for="State" class="form-control common-input-text"></select>

<br/>
selectedState: <span data-bind="text: ko.toJSON(selectedState)"></span>

淘汰赛：级联下拉菜单，第二个下拉菜单选择文本

Knockout: Cascading dropdowns, second dropdown selected text

knockout.js

knockout-mvc