如何使用 jquery json 获取多个下拉列表

Question

大家好，我想根据国家和城市根据州更改州。但我不能使用 ajax 我只想基于 javascript 和 json 数组。

    <label>Country:</label><br/>
            <select onchange="getval(this)">
            <option value="">Select Country</option>
            <option value="india">India</option>
            <option value="america">America</option>
            </select>


        <select name="" id="">
            <option value="">Select State</option>
            <option value="india">Orissa</option>
            <option value="india">Telangan</option>
            <option value="america">USA</option>
            <option value="america">California</option>
        </select>



    <select name="" id="">
        <option value="">Select city</option>
        <option value="orissa">Nal</option>
        <option value="orissa">Mir</option>
        <option value="Telangan">Hyd</option>
        <option value="Telangan">Vija</option>
        <option value="america">KRK</option>
        <option value="america">MRK</option>
    </select>

如何根据国家/地区更改状态。然后仅使用 javascript 和 json 根据状态更改城市。

提前致谢。

Answer 1

你打着需要帮助的幌子问这个问题，但你在你的 cmets 中提到了一个任务。我们不是来帮你做作业的。

无论如何，为了他人的利益，这里有一个工作示例：

https://jsfiddle.net/Twisty/5781ygy8/

HTML

<div class="select_wrapper">
  <label>Country:</label>
  <select id="country">
    <option value="0"></option>
    <option value="1">India</option>
    <option value="2">America</option>
  </select>
</div>
<div class="select_wrapper hidden">
  <label>State:</label>
  <select id="state">
    <option value="0"></option>
    <option value="1" data-country="1">Orissa</option>
    <option value="2" data-country="1">Telangan</option>
    <option value="3" data-country="2">California</option>
  </select>
</div>
<div class="select_wrapper hidden">
  <label>City:</label>
  <select id="city">
    <option value=""></option>
    <option data-state="1">Nal</option>
    <option data-state="1">Mir</option>
    <option data-state="2">Hyd</option>
    <option data-state="2">Vija</option>
    <option data-state="3">KRK</option>
    <option data-state="3">MRK</option>
  </select>
</div>

CSS

.select_wrapper {
  width: 100px;
  display: inline-block;
}

.select_wrapper label {
  display: block;
  margin: 3px auto;
}

.hidden {
  display: none;
}

jQuery

$(function() {
  $("#country").change(function() {
    console.log("INFO: Country Selected, ", $(this).val());
    var sel = $(this).val();
    $("#state").val("");
    $("#state option").hide();
    $("#city").val("");
    $("#city option").hide();
    $("#city").parent().addClass("hidden");
    if (sel === "0") {
      $("#state").val("");
      $("#state").parent().addClass("hidden");
      $("#city").val("");
      $("#city").parent().addClass("hidden");
      return false;
    }
    $("#state option[data-country!='" + sel + "']").hide();
    $("#state option[data-country='" + sel + "']").show();
    $("#state").parent().removeClass("hidden");
  });
  $("#state").change(function() {
    var sel = $(this).val();
    if (sel === "0") {
      $("#city").val(0);
      $("#city").parent().addClass("hidden");
      return false;
    }
    $("#city > option[data-state!='" + sel + "']").hide();
    $("#city > option[data-state='" + sel + "']").show();
    $("#city").parent().removeClass("hidden");
  });
});

这里是我通常会解释每个部分的地方，但由于这是给你的作业，我怀疑这对于像你这样有研究和博学的人来说都是非常清楚的。