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

Question

.net MVC、C#、KnockoutJS

所以我有 2 个下拉菜单。两者的数据都是通过从淘汰赛到 MVC 控制器功能的 Ajax 调用填充的。初始设置在选择第一个下拉列表时第二个下拉列表填充的地方工作正常。我需要做的是将按钮单击事件的第二个下拉列表中选择的文本和值传递给下一个控制器。我已经尝试过订阅和 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>