根據國家/地區更改選擇中的選項

Question

我有一個添加客戶頁面，其中有2個選項（國家和城市）。 當我選擇Country並選擇USA ，第二個選擇將具有美國城市的選項。 如果我選擇Philippines則選項將是Philippines的城市，與Canada相同，等等。

我的代碼是這樣的：

<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>

Answer 1

Kumusta Edmhar，

您顯示的小提琴效果很好。 只需將此行包括在您的<head>標記中...

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

編碼愉快！

注意：根據OP注釋刪除原始答案。

Answer 2

為了輕松實現您想要的功能，您可以使用jQuery，您可以在此處下載。

然后，我為<select>字段添加了id標簽，為選項添加了value標簽。

<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 。

知道您的表格是靜態表格，我必須取消我的第一個答案。

根據國家/地區更改選擇中的選項

問題描述

2 個解決方案

解決方案1
1 2015-10-14 03:04:42

解決方案2
1 已采納 2015-10-14 03:41:40

根據國家/地區更改選擇中的選項

問題描述

2 個解決方案

解決方案1 1 2015-10-14 03:04:42

解決方案2 1 已采納 2015-10-14 03:41:40

解決方案1
1 2015-10-14 03:04:42

解決方案2
1 已采納 2015-10-14 03:41:40