2017-07-31 74 views
0

我有兩個ajax調用。一個在第一個下拉列表中加載釋放週期,另一個在第二個下拉列表中加載方案。第二個下拉菜單中的方案對應於第一個下拉列表中選擇的值。我無法加載頁面加載。我必須通過單擊第一個下拉列表中的選項來選擇值,然後才能加載第二個下拉列表中的選項。如何在頁面加載中實現此功能,而不是通過手動選擇或觸發該事件。我不希望使用ko處理程序。感謝您提前幫助。在頁面加載時訂閱價值

//load release cycles in first dropdown 
self.pushReleaseCycles = function(releaseCycleUrl,scenarioNameUrl1,scenarioNameUrl2){ 
    $.ajax({ 
     url: sharepointScenarioListUrl + releaseCycleUrl, 
     method: "GET", 
     headers: { "Accept": "application/json; odata=verbose" }, 
     success: function (data) { 
      var items = data.d.results; 
      items.forEach(function(item) { 
       if (self.release_cycles.indexOf(item.Release_x0020_Cycle) == -1) { 

        self.release_cycles.push(item.Release_x0020_Cycle); 
       } 
      }); 

      self.selectedCycle.subscribe(function(value) { 
       self.scenarios([]); 
         self.pushScenariosToDropdown(value,scenarioNameUrl1,scenarioNameUrl2); 
      }); 
     }, 
     error: function (data) { 
      alert("ERROR in function pushReleaseCycles : " + data);console.log(data); 
     } 
    }); 
}; 

//load scenarios in second dropdown 
self.pushScenariosToDropdown = function(value,scenarioNameUrl1,scenarioNameUrl2){ 
    $.ajax({ 
     url: sharepointScenarioListUrl + scenarioNameUrl1 + value + scenarioNameUrl2, 
     method: "GET", 
     headers: { "Accept": "application/json; odata=verbose" }, 
     success: function (data) { 
      var items = data.d.results; 
      items.forEach(function(item) { 
       self.scenarios.push(new ScenarioModel(item)); 
       console.log(data); 
      }); 
      self.selectedScenario.subscribe(function(value) { 
       dbName = ko.toJSON(value.title); 
       jarFile1 = ko.toJSON(value.jar); 
       fdMimoAvailable = ko.toJSON(value.fdmimo); 
       self.setValues(dbName,jarFile1,fdMimoAvailable); 
      }); 
     }, 
     error: function (data) { 
      alert("ERROR in function pushScenariosToDropdown: " + data);console.log(data); 
     } 
    }); 
}; 

我的HTML:

<select id="dropdown" required class="form-control select2" data-bind="options: release_cycles,value:selectedCycle"> 
</select> 

<select id="dropdown2" required="required" class="form-control select2" data-bind="options: scenarios, optionsText:'scenarioName',optionsCaption:'Please Select Scenario', value:selectedScenario,validationOptions: { errorElementClass:'input-validation-error' },selectedOptions: chosenScenario"> 
</select> 

回答

0

如果你不想去從服務器獲取的值基於第一值的第二個選擇框,但要加載整個數據集,然後加載第二個盒子的所有選項的json對象,然後在第一個選擇之後解析它。如果它有很多數據,它會影響性能。

+0

這並不提供答案的問題。要批評或要求作者澄清,請在其帖子下方留言。 - [來自評論](/ review/low-quality-posts/16884391) – rafalmp

+0

它確實提供了一個答案。 OP想知道如何做。我提供了一個答案。 OP似乎並沒有特別要求代碼,而是更類似於最好的方法。 – Difster

1

我會處理這個問題的方式是改變數據如何從服務器中提取。您需要包含頁面所需的整個菜單結構。在我看來,最好稍長的負載,而不是一個波濤洶涌的經驗。這裏有一個嵌套菜單的例子,以及它的外觀。

function ViewModel() { 
 
    var self = this; 
 

 
    self.Dropdown1 = ko.observableArray(); 
 
    self.SelectedItem1 = ko.observable(); 
 

 
    self.Dropdown2 = ko.computed(function() { 
 
    if (self.SelectedItem1() == null) { 
 
     return []; 
 
    }; 
 
    console.log(ko.toJS(self.SelectedItem1())) 
 
    return self.SelectedItem1().Submenu; 
 
    }); 
 

 
    self.SelectedItem2 = ko.observable(); 
 

 
    self.LoadDropDown = function() { 
 
    self.Dropdown1.push({ 
 
     "Name": "Hat", 
 
     "Value": "top", 
 
     "Submenu": [{ 
 
      "Name": "Blue", 
 
      "Value": "#0000FF" 
 
     }, 
 
     { 
 
      "Name": "Green", 
 
      "Value": "#00FF00" 
 
     }, 
 
     { 
 
      "Name": "Red", 
 
      "Value": "#FF0000" 
 
     } 
 
     ] 
 
    }); 
 
    self.Dropdown1.push({ 
 
     "Name": "Shirt", 
 
     "Value": "middle", 
 
     "Submenu": [{ 
 
      "Name": "Striped", 
 
      "Value": "Striped" 
 
     }, 
 
     { 
 
      "Name": "Logo", 
 
      "Value": "Logo" 
 
     }, 
 
     { 
 
      "Name": "Plain", 
 
      "Value": "None" 
 
     } 
 
     ] 
 
    }); 
 
    self.Dropdown1.push({ 
 
     "Name": "Pants", 
 
     "Value": "bottom", 
 
     "Submenu": [{ 
 
      "Name": "Jeans", 
 
      "Value": "Jeans" 
 
     }, 
 
     { 
 
      "Name": "Kakhis", 
 
      "Value": "Kakhis" 
 
     }, 
 
     { 
 
      "Name": "Cordroy", 
 
      "Value": "Cordroy" 
 
     } 
 
     ] 
 
    }); 
 
    } 
 
    self.LoadDropDown(); 
 

 

 
} 
 

 
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<select data-bind="options: Dropdown1, optionsText: 'Name', value: SelectedItem1"></select> 
 

 
<select data-bind="options: Dropdown2, optionsText: 'Name', value: SelectedItem2"></select>