ノックアウトとデータベースへのAJAX呼び出しを使用してドロップダウンリストを作成してください

Question

私はいくつかの値を持つドロップダウンリストを持っています。

どちらの値が選択されているかに基づいて、2番目のドロップダウンリストにデータベースの値を入力したいとします。

私はknockoutを使用しており、AJAXクエリをデータベースからJavaScriptコードに戻すように設定しています。

最初のドロップダウンリストで項目を選択するたびに、コンソールにアラートまたはログを記録すると、2番目のドロップダウンリストのすべての正しい値が表示されます。最初のドロップダウンリストから選択した値を取得し、AJAX経由でデータベースに送信し、2番目のドロップダウンリストの値リストを返す限り、すべてが正しく機能します。

問題は、2番目のドロップダウンリストに値が入力されないことです。私はノックアウトとのデータバインディングを行うのは比較的簡単な修正だと思っていますが、次に試してみたいことはよく分かりません。

何か助けていただければ幸いです。ありがとうございました！上記のコードから

self.getSomeValuesFromDb = function (url, valueToSendToDb) { 
     $.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: url, 
      data: { 
       valueToSendToDb: valueToSendToDb 
      }, 
      success: function (response) { 
       self.valueObsArray = ko.observableArray([]); 
       self.selected_value = ko.observable(); 
       $.each(response, function (index, theValue) { 
        self.valueObsArray.push(response[index]); 
       }); 
       alert(self.valueObsArray()); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       console.log("There has been an error retrieving the values from the database."); 
      }  
     }); 





<div class="form-group"> 
<label class="col-sm-3 col-md-3 control-label">DDL 2:</label> 
<div class="col-sm-9 col-md-9" data-bind="with: $parent.popup.selected_valueDropDownList1"> 
<select class="form-control" data-bind="options: $root.getSomeValuesFromDb('/SomeValue/Test','theValue'), value: $root.valueObsArray, optionsCaption: 'Select a value'"></select></div></div> 

Answer 1

、あなただけgetSomeValuesFromDb外valueObsArrayを初期化する必要があります。その後getSomeValuesFromDbの内側に次のコードを使用して空に戻っvalueObsArrayの配列を設定する必要が

valueObsArray([]); 

それは次のようになります。

そうでない場合は

self.valueObsArray = ko.observableArray([]); 
self.getSomeValuesFromDb = function (url, valueToSendToDb) { 
    $.ajax({ 
     type: 'POST', 
     dataType: 'json', 
     url: url, 
     data: { 
      valueToSendToDb: valueToSendToDb 
     }, 
     success: function (response) { 
      self.valueObsArray([]); 
      self.selected_value = ko.observable(); 
      $.each(response, function (index, theValue) { 
       self.valueObsArray.push(response[index]); 
      }); 
      alert(self.valueObsArray()); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.log("There has been an error retrieving the values from the database."); 
     }  
    }); 

あなたも取得するには、AJAX呼び出しを行うためにpureComputedを使用することができます値は、最初のドロップダウンから選択される第二のドロップダウンリストの値：

var simpleListModel = function() { 
 
    var self = this; 
 
    self.firstOptions = ko.observable(["", "Apple", "Orange", "Mango"]); 
 
    self.selectedFirstOption = ko.observable(""); 
 
    self.secondOptions = ko.pureComputed(function() { 
 
    if(self.selectedFirstOption() === "") return []; 
 
    else { 
 
     // do ajax call here 
 
     var number = 0; 
 
     return ko.utils.arrayMap(self.firstOptions(), function(item) { 
 
     return self.selectedFirstOption() + number++; 
 
     }); 
 
    } 
 
    }, this); 
 
}; 
 

 
ko.applyBindings(simpleListModel);

<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.2.0/knockout-min.js"></script> 
 

 
<div> 
 
    <select data-bind="options: firstOptions, value: selectedFirstOption"></select> 
 
</div> 
 
<div> 
 
    <select data-bind="options: secondOptions"></select> 
 
</div>