如何以 html 形式填充特定国家的州和城市？（依赖选项列表）答案

【问题标题】：how to populate states and cities of a particular country in html forms ? (dependent picklists)如何以 html 形式填充特定国家的州和城市？（依赖选项列表）
【发布时间】：2021-06-16 19:55:40
【问题描述】：

对于一家公司，有两个地址。一个是注册地址，另一个是住所地址。 for both registeed & warehouse address i want to add the dependent picklists.(when a country is selected, the states of that selected country only should get populated in states dropdown. and similarly when we select the state the cities of that particular state should get填充。

我找到了一个工作示例。但这里的问题是，当我在注册地址中选择国家时，仓库地址下拉列表也会被填充（仓库地址的州和城市也会受到影响或改变，我不想要这种行为）反之亦然。如何解决这个问题

下面是我的例子。

-
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">

  <div class="row">
    <p>Rgistered Address</p><br><br>
    <select name="country" class="countries order-alpha" id="countryId">
      <option value="">Select Country</option>
    </select>
    <select name="state" class="states order-alpha" id="stateId">
      <option value="">Select State</option>
    </select>
    <select name="city" class="cities order-alpha" id="cityId">
      <option value="">Select City</option>
    </select>
  </div>
</div>
<br><br>
<div class="container">
  <div class="row">
    <p>warehouse Address</p><br><br>
    <select name="country" class="countries order-alpha" id="countryId">
      <option value="">Select Country</option>
    </select>
    <select name="state" class="states order-alpha" id="stateId">
      <option value="">Select State</option>
    </select>
    <select name="city" class="cities order-alpha" id="cityId">
      <option value="">Select City</option>
    </select>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

【问题讨论】：

自己写吧，没那么难，没人能编辑：geodata.solutions/includes/countrystatecity.js你也贴了它的相关代码。怀疑有人会去挖掘它，然后编写 JS 来覆盖它。这里没有人会手动填充您的下拉列表并为您启动全新的 JS。自己尝试一下，如果遇到困难，请寻求帮助。
另外你有多个相同的 id，那些不能相同，id 是唯一的。
@ikiK ，添加了我在应用程序中使用的 js 代码。请检查
抱歉有太多代码要扔了。 200 行时...你应该看到minimal reproducible example 是什么以及为什么重要。

标签： html jquery state country picklist

【解决方案1】：

我认为您需要通过将输入 id 更改为来分隔地址类型

<select name="country" class="countries order-alpha" id="countryIdRegistered">
  <option value="">Select Country</option>
</select>

<select name="country" class="countries order-alpha" id="countryIdWhereHouse">
  <option value="">Select Country</option>
</select>

因此，您可以随心所欲地管理它们。

【讨论】：