Question

.net MVC，C＃，KnockoutJS

所以我有2个下拉菜单。两者的数据都通过Ajax调用从knockout调用到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>

淘汰赛：级联下拉，第二次下拉选择文字

1 个答案: