如何以 html 形式填充特定国家/地区的州和城市？ 依赖选项列表

问题描述

对于一个公司，有两个地址。一个是注册地址，另一个是wherehouse地址。 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">

解决方法

我认为您需要通过将输入 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>

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