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

Posted 2023-05-08

【中文标题】如何使用 jquery json 获取多个下拉列表

【英文标题】：how to get Multiple dropdown with using jquery json

【发布时间】：2016-11-26 12:58:23

【问题描述】：

大家好，我想根据国家和城市根据州更改州。但我不能使用 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 根据状态更改城市。

提前致谢。

【问题讨论】：

首先，我会为每个人分配 ID。几秒钟后，您将希望在执行 change 事件后检查选择。您能否更清楚地说明需要发生什么？

请查看以下链接demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php

【参考方案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");
  );
);

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

【讨论】：

我不知道如何感谢 Twisty 先生，您节省了我的时间。非常感谢。