如果第一個返回值爲真，則顯示第二個複選框

Question

我收到了一個問題，我也接受爲此獲得降薪，因爲我還沒有真正嘗試過一些東西。問題是我不知道如何命名該問題以及我應該在互聯網上尋找什麼。

是這樣的，我有一個api一個鏈接，（對我來說）包含在這種格式中國的所有省份：

{ 
     "result":{ 
     "version":"1.0", 
     "status":100101, 
     "msg":"got provinces successfully" 
    }, 
    "data":[ 
     {"province":"\u9999\u6e2f"}, 
     {"province":"\u5317\u4eac\u5e02"} 

和更多一些。現在我想製作一個dropdown select menu，其中包含所有這些省份的下拉值，如果選擇了一個下拉菜單，它應該檢查另一個URL，說明所選省份是否有效（在我的情況下，它只能是有效的，因爲用戶無法輸入自己的東西）

?action=api&i=getCityForProvince&data=北京市 

這將是url檢查這一點，如果它是成功的它讓我在像上面的代碼相同的格式全省的城市。有了這個我想做出另一個選擇框，只有當第一個是真的時纔會出現。在這個選擇框中，你選擇你的城市，就是這樣。

我可悲的是絕對不知道如何開始這個問題，我應該尋找什麼來解決這個問題。

Answer 1

爲了使您的工作更輕鬆，我建議您使用：

• 模板庫
• 的MVVM框架

直接使用jQuery和MVVM庫或模板庫，像handlebars或mustache之間的區別是，使用jQuery你必須要處理的護理元素和其他解決方案，您將此工作留給框架。

無論如何，我建議使用擊倒使用模板庫，因爲：

• 它包括模板
• 它可以提供一個雙向綁定
• 它可以處理事件
• 它可以應用類，修改可見性，啓用和禁用元素...

這裏我添加一個簡單的例子， t將其可以這樣做：

// This is the ko part: 
 

 
// This is the view model using Revealing Module Pattern to build it 
 
var vm = (function(){ 
 
    // The list of provinces which will be shown when available 
 
    var provinces = ko.observableArray([]); 
 
    // The province selected in the list 
 
    var selectedProvince = ko.observable(); 
 
    // This is what you'd call when the provinces are loaded using AJAX 
 
    var loadProvinces = function(data) { 
 
    provinces(data); 
 
    }; 
 
    // This functions will be triggered when the selected province changes... 
 
    var updateCities = function() { 
 
    console.log("Here you'd update cities"); 
 
    }; 
 
    // ... because of this subscription 
 
    selectedProvince.subscribe(updateCities); 
 
    
 
    // return the object with the desired properties: 
 
    return { 
 
    provinces: provinces, 
 
    selectedProvince: selectedProvince, 
 
    loadProvinces: loadProvinces, 
 
    updateCities: updateCities 
 
    }; 
 
})(); 
 

 
ko.applyBindings(vm); 
 

 

 
// AJAX call simulation: 
 

 
// the returned data 
 
var data = [ 
 
     {"province":"\u9999\u6e2f"}, 
 
     {"province":"\u5317\u4eac\u5e02"} 
 
    ]; 
 
    
 

 
// a time out to load the data (simulate AJAX call) 
 
setTimeout(function() { vm.loadProvinces(data);}, 1000);

<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 data-bind="visible: !(provinces().length)"> 
 
    Please wait while loading provinces 
 
</div>     
 

 
<div data-bind="visible: provinces().length"> 
 
    <select data-bind="options: provinces, 
 
        optionsText: 'province', 
 
        optionsValue: 'province', 
 
        value: selectedProvince"> 
 
    </select> 
 
    <p>Selected province: <span data-bind="text: selectedProvince"></span></p> 
 
</div>

正如你所看到的，它不僅處理創建DOM元素，BU也處理事件，雙向-bindig，檢測值的變化...

Answer 2

您可以最初爲第二個複選框編寫HTML併爲其指定一個display: none;屬性。然後在JS：

if (firstcheckboxValue === true) { 

document.getElementById('secondCheckboxId').style='display: block'; 

} 

你可以使用display: inline-block;或display: inline;等，只要適合你的佈局更好。

Answer 3

我不知道它是否是中文這個事實與你的問題有什麼關係？我敢打賭，事實並非如此。用jquery這很容易完成這樣的任務。這就像你需要拼湊的積木。

瞭解如何使用JQuery來編寫make ajax calls。這很容易，它也應該處理你的Json結果，使它成爲一個對象或數組。所以在回調中，你可以建立你的選擇框，如described here。另一個塊是bind to the change event選擇框，它使用Select輸入中的value進行另一個Ajax調用（您現在已經知道了）。並且在回調的結果中，您還可以檢查結果json，如果結果成功，則可以使用已知的方法或change its visiblity根據結果輕鬆填充另一個選擇框。

我想你會想學習這些東西，不應該得到一個現成的編碼的解決方案:)如果你使用jQuery的

Answer 4

事情會急劇變得更加容易。由於沒有開始使用的代碼，因此我將列出我要經過的步驟。

1）爲下拉列表編寫DOM元素，例如#dd_provinces #dd_cities。 #dd_cities將被隱藏。
2）從$（）。ready（function（）{...}）我會進行Web API調用。
3）從＃2 API調用的結果回調中，進行第二次API調用（一次獲取省的城市）。
4）所述第二API的回調將填充的DOM元素的結果回調#dd_cities
5）取消隱藏#dd_cities

樣品的編號： HTML

<select id="dd_provinces"> 
</select> 
<select id="dd_cities" style="visibility: hidden"> 
</select> 

JS

$(document).ready(function() { 
     $.ajax({ 
      url: "/echo/json/", 
      data: "", 
      success: function(evt) { 
       var mData = ["City 1", "City 2", "City 3", "City 4"]; 
       for(var i = 0; i < mData.length; i++){ 
        var optionElem = "<option>" + mData[i] + "</option>"; 
        $("#dd_provinces").append(optionElem); 
       } 
       $.ajax({ 
        url: "/echo/json", 
        data: "", 
        success: function(evt) { 
         $("#dd_cities").css("visibility", "visible").animate('5000'); 
        } 
       }); 
      }, 
      error: function(evt) { 
       console.log(evt); 
      } 
     }); 
    });