更改選項從國家

我有一個添加客戶頁面2選擇（國家和城市）。當我選擇Country並選擇USA時，第二個選擇將會有美國城市的選項。如果我選擇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>

來源

2015-10-14 Edmhar

它們存儲在你的MySQL數據庫中嗎？還是他們修理？如果是的話，你可以給我們你的表結構。 –

你想使用jQuery嗎？此外，您的選項中沒有任何值''？最後，你打算支持多少個國家？（有很多和成千上萬的潛在城市）。 –

@LoganWayne是的。 – Edmhar

爲了輕鬆實現你想要的，你可以使用jQuery，你可以下載here。

然後我添加了id標籤爲您的<select>字段和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。

我不得不放棄我的第一個答案，因爲知道你的表單是靜態的。

來源

2015-10-14 03:41:40

現在好的，謝謝！ – Edmhar

@ Edmhar - 很好。不要忘記拉古納在你的位置。 ;） –

Pinoy？哈哈.... – Edmhar

Kumusta Edmhar，

的fiddle你已經證明作品精細。只需在您的<head>標籤中包含此行...

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

快樂編碼！

注：根據OP評論報廢原始答案。

來源

2015-10-14 03:04:42 Kuya

Kuya出於好奇的一個問題是建議在html頁面上放置php腳本？ – guradio

是的，這是完全可以接受的，甚至有時需要達到所需的輸出。 – Kuya

ty kuya澄清..快樂編碼 – guradio

更改選項從國家

回答

相關問題