更改基于国家的选择选项 - Changing options in select based from country

Changing options in select based from country

本文关键字：选择选项国家于国家 | 更新日期: 2023-09-27

我有一个添加客户页面2选择(国家和城市)。当我选择Country并选择USA时，第二次选择将有美国城市的选项。如果我选择Philippines，选项将是菲律宾的城市，Canada也是如此，等等。

My Code是这样的:

<select class="form-control" name="country" required>
          <option selected disabled>*Select Country </option>
          <option>USA</option>
          <option>Philippines</option>
          <option>Canada</option>
</select> &nbsp;&nbsp;&nbsp;
       //If 'USA' was selected the select options values will be this like.
        <select class="form-control" name="loc" required>
          <option selected disabled>*State / City</option>
          <option></option>
          <option>California</option>
          <option>New York</option>
          <option>New Jersey</option>
          <option>Illinois</option>
          <option>Others</option>
        </select>
     //else If 'Philippines' was selected the select options values will be this like.
        <select class="form-control" name="loc" required>
           <option selected disabled>*State / City</option>
          <option></option>
          <option>Manila</option>
          <option>Quezon City</option>
          <option>Makati</option>
          <option>Cebu</option>
          <option>Davao</option>
          <option>Others</option>

     //else If 'Canada' was selected the select options values will be this like.
        <select class="form-control" name="loc" required>
           <option selected disabled>*State / City</option>
          <option></option>
          <option>Toronto</option>
          <option>Vancouver</option>
          <option>Others</option>
        </select>

为了轻松实现您想要的，您可以使用jQuery，您可以在这里下载。

然后我为你的<select>字段和value标签添加了id标签。

<select class="form-control" name="country" id="country" required>
  <option selected disabled>*Select Country </option>
  <option option="USA">USA</option>
  <option option="Philippines">Philippines</option>
  <option option="Canada">Canada</option>
</select>
<select class="form-control" name="loc" id="loc" required>
<!-- REST OF OTHER CODES -->

然后创建脚本:

<script src="jquery-1.9.1.min.js"></script><!-- REPLACE NECESSARY JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<!-- START CREATING YOUR SCRIPT -->
<script type="text/javascript">
  $(document).ready(function(){
    $("#country").change(function(){
       var country = $(this).val();
       var usa = '<option>California</option><option>New York</option><option>New Jersey</option><option>Illinois</option><option>Others</option>';
       var phi = '<option>Manila</option><option>Quezon City</option><option>Makati</option><option>Cebu</option><option>Davao</option><option>Others</option>';
       var can = '<option>Toronto</option><option>Vancouver</option>'; 
       var other = '<option selected disabled>*State / City</option>';
       if(country == "USA"){
         $("#loc").empty().append(usa);
       }
       else if(country == "Philippines"){
         $("#loc").empty().append(phi);
       }
       else if(country == "Canada"){
         $("#loc").empty().append(can);
       }
       else {
         $("#loc").empty().append(other);  
       }
    });
  });
</script>

看一下这个JSFiddle

我不得不放弃我的第一个答案，知道你的表单是一个静态的。

您所展示的小提琴工作良好。只需将这行包含在您的<head>标签中…

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

注意:根据OP的评论，取消了原来的答案。