如果第一个返回值为真，则显示第二个复选框

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); 
      } 
     }); 
    });