如果使用JQuery和AJAX後在表單中選擇另一個下拉菜單，則更改下拉值

Question

如何根據另一個下拉值更改下拉值？

我將有3個下拉列表值的形式，就像下面：

<form method="post" action="find.pgp"><div class="form-group col-lg-2"> 
      <label>Country</label> 
      <select id="country" name="country" class="form-control"> 
       <option value="1">Japan</option> 
       <option value="2">China</option> 
       <option value="3">New Zealand</option> 
      </select> 
     </div> 
     <div class="form-group col-lg-2"> 
      <label>province</label> 
      <select name="province" class="form-control"> 
       <option value="1">a province</option> 
      </select> 
     </div> 

<div class="form-group col-lg-2"> 
      <label>city</label> 
      <select name="city" class="form-control"> 
       <option value="1">a city</option> 
      </select> 
     </div> <input type="submit> </form> 

我要的是，
1日我選擇國名
第二屆省改爲根據國家有關它的表在DB
3日，我選擇省則變成了城市的城市下拉的值在數據庫中有關省臺
4日，我會提交這一切找到分貝的東西

那麼我應該用JQuery和Ajax來檢索值並更改下拉值呢？ 謝謝

Answer 1

所以基本上你需要禁用select第一，除非國家的權利？或者其他能夠讓國家隊首先被選中的東西。

<form id="myForm"> 
    <div class="form-group col-lg-2"> 
     <label>Country</label> 
     <select id="country" name="country" class="form-control"> 
      <option value="1">Japan</option> 
      <option value="2">China</option> 
      <option value="3">New Zealand</option> 
     </select> 
    </div> 
    <div class="form-group col-lg-2"> 
     <label>province</label> 
     <select name="province" class="form-control" disabled> 
      <option value="1">a province</option> 
     </select> 
    </div> 

    <div class="form-group col-lg-2"> 
     <label>city</label> 
     <select name="city" class="form-control" disabled> 
      <option value="1">a city</option> 
     </select> 
    </div> 
    <input type="submit"> 
</form> 

因爲我不知道你的服務器響應是什麼。我假設這一個

{"response": " <option selected value=\"countryprovince1\">Selected Province1</option><option selected value=\"countryprovince2\">Selected Province2</option><option selected value=\"countryprovince3\">Selected Province3</option>"} 

而且通過這種方式，我可以簡單地使用jQuery html()

//Select country first 
$('select[name="country"]').on('change', function() { 
    var countryId = $(this).val(); 

    $.ajax({ 
     type: "POST", 
     url: "get-province.php", 
     data: {country : countryId }, 
     success: function (data) { 
        //remove disabled from province and change the options 
        $('select[name="province"]').prop("disabled", false); 
        $('select[name="province"]').html(data.response); 
     } 
    }); 
}); 


$('select[name="province"]').on('change', function() { 
    var provinceId = $(this).val(); 

    $.ajax({ 
     type: "POST", 
     url: "get-city.php", 
     data: {province : provinceId }, 
     success: function (data) { 
        //remove disabled from city and change the options 
        $('select[name="city"]').prop("disabled", false); 
        $('select[name="city"]').html(data.response); 
     } 
    }); 
}); 

//once all field are set, submit 
$('#myForm').submit(function() { 
    $.ajax({ 
     type: "POST", 
     url: "find.php", 
     data: $('#myForm').serialize(), 
     success: function (data) { 
       //success 
     } 
     }); 
    }); 
}); 

Answer 2

請檢查本教程。它一定會幫助你。

http://www.php-dev-zone.com/2013/10/country-state-city-dropdown-using-ajax.html

或者這一個。

http://www.techsofttutorials.com/ajax-country-state-city-dropdown-using-phpmysql/

Answer 3

首先添加id貴省select和你的城市select

<form method="post" action="find.pgp"> 
    <div class="form-group col-lg-2"> 
     <label>Country</label> 
     <select id="country" name="country" class="form-control"> 
      <option value="1">Japan</option> 
      <option value="2">China</option> 
      <option value="3">New Zealand</option> 
     </select> 
    </div> 

    <div class="form-group col-lg-2"> 
     <label>province</label> 
     <select name="province" class="form-control" id="province"> 
     </select> 
    </div> 

    <div class="form-group col-lg-2"> 
     <label>city</label> 
     <select name="city" class="form-control" id="select"></select> 
    </div> 
    <input type="submit"> 
</form> 

然後，假設你已經擁有jQuery的設置在頁面上：

<script> 
    $(function(){ 
     // event called when the country select is changed 
     $("#country").change(function(){ 
      // get the currently selected country ID 
      var countryId = $(this).val(); 
      $.ajax({ 
       // make the ajax call to our server and pass the country ID as a GET variable 
       url: "get_provinces.php?country_id=" + countryId, 
      }).done(function(data) { 
       // our ajax call is finished, we have the data returned from the server in a var called data 
       data = JSON.parse(data); 

       // loop through our returned data and add an option to the select for each province returned 
       $.each(data, function(i, item) { 
        $('#province').append($('<option>', {value:i, text:item})); 
       }); 

      }); 
     }); 
    }); 
</script> 

和你get_provinces.php腳本，你打電話與阿賈克斯：

<?php 
    /// we can access the country id with $_GET['country_id']; 
    // here you can query your database to get the provinces for this country id and put them in an array called $provinces where the key is the id and the value is the province name 

    // this is a dummy array of provinces, you will replace this with the data from your database query 
    $provinces = array(6=>"Province One",54=>"Province Two",128=>"Province Three"); 
    echo json_encode($provinces); 
?> 

這就是基本思想。您顯然需要更改get_provinces.php以查詢您的數據庫並使用國家/地區ID返回正確的數據。您可以弄清楚如何從這個做好城市以及

Answer 4

你必須使用.change（）事件處理程序爲此

$(document).ready(function() { 
    $('.form-group col-lg-2').change(function() { 
    var $select = $(this).val(); 
    // here you can apply condition on $select to apply different scenarios. 


    }); 
    }); 

這只是一個想法。你可以在網上查看不同的例子。請在下面的網頁上查看一下數據庫的這個功能。

https://css-tricks.com/dynamic-dropdowns/

Answer 5

只使用這兩條線，它的工作完美。

jQuery('#select_selector').change(function(){ 
    jQuery("#select_selector1 option").eq(jQuery(this).find(':selected').index()).prop('selected',true); 
});