Question

我有一个问题，而且我也接受了这个问题，因为我还没有真正尝试过。问题是我不知道如何命名问题以及我应该在互联网上寻找什么。

就像这样，我得到一个api的链接（在我的例子中）以这种格式包含所有中国省份：

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

等等。现在我想创建一个包含所有这些省份的dropdown select menu作为下拉值，如果选择了一个下拉列表，它应该检查另一个URL，该URL说明所选省份是否有效（在我的情况下，它只能是有效的，因为用户无法自己输入内容。

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

这将是url用于检查，如果成功，它会以与上述代码相同的格式显示省内的城市。有了这个，我想制作另一个选择框，只有在第一个为真时才出现。在此选择框中，您可以选择您的城市，就是这样。

我遗憾地完全不知道如何从这个问题开始，以及我应该寻找什么来解决这个问题。

Answer 1

我想知道它的中文是否与您的问题有关？我敢打赌，它没有。使用jquery，完成此类任务非常容易。这就像你需要组建的构建块一样。

了解如何使用JQuery make ajax calls。它非常简单，它也应该处理你的Json结果，使它成为一个对象或数组。因此，在回调中，您可以构建像described here这样的选择框。另一个块是选择框的bind to the change event，它使用Select输入中的value进行另一个Ajax调用（您现在已经知道了）。在该回调的结果中，您还可以检查结果json，如果结果成功，您可以使用现有的已知方法轻松填充另一个选择框，或根据您的结果change its visiblity。

我认为你会想要学习这些东西，并且不应该得到一个现成的编码解决方案：）

Answer 2

为了让您的工作更轻松，我建议您使用：

模板库
MVVM框架

直接使用jQuery与MVVM库或模板库（如handlebars或mustache）之间的区别在于，使用jQuery，您必须处理元素，并与其他解决方案一起使用，你把这项工作留给了框架。

ANyway，我建议使用knockout来使用模板库，因为：

它包含模板
它可以提供双向绑定
它可以处理事件
它可以应用类，修改可见性，启用和禁用元素......

这里我添加了一个简单的例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

正如您所看到的，它不仅处理创建DOM元素，还处理事件，双向绑定，检测值的变化......

Answer 3

您最初可以为第二个复选框编写HTML并为其指定display: none;属性。然后在JS：

if (firstcheckboxValue === true) {

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

}

您可以使用display: inline-block;或display: inline;等，更适合您的布局。

Answer 4

如果使用jQuery，事情会变得更容易。由于没有代码可以开始使用，我只列出我要经历的步骤。

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

如果first的返回值为true，则显示第二个复选框

4 个答案: