動態添加選擇國家和國家通過點擊添加更多

Question

我的代碼是不刷新狀態列表通過點擊添加更多並顯示以前的列表。

例如，你選擇國家阿富汗你的國家顯示了一個列表。但是，當您單擊添加更多，然後選擇不同的國家時，您將看到相同的狀態列表。

var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica", "Antigua and Barbuda", "Argentina", "Armenia"); 
 

 
// States 
 
var s_a = new Array(); 
 
s_a[0]=""; 
 
s_a[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol"; 
 
s_a[2]="Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore"; 
 
s_a[3]="Adrar|Ain Defla|Ain Temouchent|Alger|Annaba|Batna|Bechar|Bejaia|Biskra|Blida|Bordj Bou Arreridj|Bouira|Boumerdes|Chlef|Constantine|Djelfa|El Bayadh|El Oued|El Tarf|Ghardaia|Guelma|Illizi|Jijel|Khenchela|Laghouat|M'Sila|Mascara|Medea|Mila|Mostaganem|Naama|Oran|Ouargla|Oum el Bouaghi|Relizane|Saida|Setif|Sidi Bel Abbes|Skikda|Souk Ahras|Tamanghasset|Tebessa|Tiaret|Tindouf|Tipaza|Tissemsilt|Tizi Ouzou|Tlemcen"; 
 
s_a[4]="Eastern|Manu'a|Rose Island|Swains Island|Western"; 
 
s_a[5]="Andorra la Vella|Bengo|Benguela|Bie|Cabinda|Canillo|Cuando Cubango|Cuanza Norte|Cuanza Sul|Cunene|Encamp|Escaldes-Engordany|Huambo|Huila|La Massana|Luanda|Lunda Norte|Lunda Sul|Malanje|Moxico|Namibe|Ordino|Sant Julia de Loria|Uige|Zaire"; 
 
s_a[6]="Anguilla"; 
 
s_a[7]="Antartica"; 
 
s_a[8]="Barbuda|Redonda|Saint George|Saint John|Saint Mary|Saint Paul|Saint Peter|Saint Philip"; 
 
s_a[9]="Antartica e Islas del Atlantico Sur|Buenos Aires|Buenos Aires Capital Federal|Catamarca|Chaco|Chubut|Cordoba|Corrientes|Entre Rios|Formosa|Jujuy|La Pampa|La Rioja|Mendoza|Misiones|Neuquen|Rio Negro|Salta|San Juan|San Luis|Santa Cruz|Santa Fe|Santiago del Estero|Tierra del Fuego|Tucuman"; 
 
s_a[10]="Aragatsotn|Ararat|Armavir|Geghark'unik'|Kotayk'|Lorri|Shirak|Syunik'|Tavush|Vayots' Dzor|Yerevan"; 
 
// <!-- --> 
 

 

 

 
function populateStates(countryElementId, stateElementId){ 
 
\t 
 
\t var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex; 
 

 
\t var stateElement = document.getElementById(stateElementId); 
 
\t 
 
\t stateElement.length=0; \t // Fixed by Julian Woods 
 
\t stateElement.options[0] = new Option('Select State',''); 
 
\t stateElement.selectedIndex = 0; 
 
\t 
 
\t var state_arr = s_a[selectedCountryIndex].split("|"); 
 
\t 
 
\t for (var i=0; i<state_arr.length; i++) { 
 
\t \t stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]); 
 
\t } 
 
} 
 

 
function populateCountries(countryElementId, stateElementId){ 
 
\t // given the id of the <select> tag as function argument, it inserts <option> tags 
 
\t var countryElement = document.getElementById(countryElementId); 
 
\t countryElement.length=0; 
 
\t countryElement.options[0] = new Option('Select Country','-1'); 
 
\t countryElement.selectedIndex = 0; 
 
\t for (var i=0; i<country_arr.length; i++) { 
 
\t \t countryElement.options[countryElement.length] = new Option(country_arr[i],country_arr[i]); 
 
\t } 
 

 
\t // Assigned all countries. Now assign event listener for the states. 
 

 
\t if(stateElementId){ 
 
\t \t countryElement.onchange = function(){ 
 
\t \t \t populateStates(countryElementId, stateElementId); 
 
\t \t }; 
 
\t } 
 
} 
 

 

 
    $('.addmore').click(function(e) { 
 
     $clone = $('#country').clone(); 
 
     $clone.attr('id', 'country' + ($('.country').length + 1)); 
 
     $clone.insertBefore($('.button-div')); 
 
    
 
     $clones = $('#state').clone(); 
 
     $clones.attr('id', 'state' + ($('.state').length + 1)); 
 
     $clones.insertBefore($('.button-div')); 
 
    
 
    }); 
 

 

 
    populateCountries("country", "state");

<div class="row" id="addparts"> 
 
    <div class="form-group" id="raghav"> 
 
    Select Country: 
 
    <select id="country" name="country" class="country"></select></br></br> 
 
    Select State: 
 
    <select name="state" id="state" class="state"></select></br> 
 
    
 
    </div> 
 
</div> 
 

 
<div class="button-div"> 
 
    <input type="button" name="addmore" class="addmore" value="Add More"> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body> 
    <p> 
     my code is not refreshing the state list by clicking on add more and showing previous list 
    </p> 
    <div class="row" id="add_parts"> 
     <div class="form-group" id=""> 
      <select id="country" name ="country" class="country"></select> 
      <select name ="state" id ="state" class="state"></select> 
     </div> 
    </div> 
    <div class="button-div"> 
     <input type="button" name="add_more" class="add_more" value="Add More"> 
    </div> 
</body> 

Answer 1

如果你想多個字段取決於國家之間的動態和狀態必須使用動態數字定義ID。

如果你想你可以設置爲輸入框顯示下限低於

var max_fields = 10; //maximum input boxes allowed 

代碼工作，你可以嘗試一下

var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica", "Antigua and Barbuda", "Argentina", "Armenia"); 
 

 
// States 
 
var s_a = new Array(); 
 
s_a[0] = ""; 
 
s_a[1] = "Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol"; 
 
s_a[2] = "Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore"; 
 
s_a[3] = "Adrar|Ain Defla|Ain Temouchent|Alger|Annaba|Batna|Bechar|Bejaia|Biskra|Blida|Bordj Bou Arreridj|Bouira|Boumerdes|Chlef|Constantine|Djelfa|El Bayadh|El Oued|El Tarf|Ghardaia|Guelma|Illizi|Jijel|Khenchela|Laghouat|M'Sila|Mascara|Medea|Mila|Mostaganem|Naama|Oran|Ouargla|Oum el Bouaghi|Relizane|Saida|Setif|Sidi Bel Abbes|Skikda|Souk Ahras|Tamanghasset|Tebessa|Tiaret|Tindouf|Tipaza|Tissemsilt|Tizi Ouzou|Tlemcen"; 
 
s_a[4] = "Eastern|Manu'a|Rose Island|Swains Island|Western"; 
 
s_a[5] = "Andorra la Vella|Bengo|Benguela|Bie|Cabinda|Canillo|Cuando Cubango|Cuanza Norte|Cuanza Sul|Cunene|Encamp|Escaldes-Engordany|Huambo|Huila|La Massana|Luanda|Lunda Norte|Lunda Sul|Malanje|Moxico|Namibe|Ordino|Sant Julia de Loria|Uige|Zaire"; 
 
s_a[6] = "Anguilla"; 
 
s_a[7] = "Antartica"; 
 
s_a[8] = "Barbuda|Redonda|Saint George|Saint John|Saint Mary|Saint Paul|Saint Peter|Saint Philip"; 
 
s_a[9] = "Antartica e Islas del Atlantico Sur|Buenos Aires|Buenos Aires Capital Federal|Catamarca|Chaco|Chubut|Cordoba|Corrientes|Entre Rios|Formosa|Jujuy|La Pampa|La Rioja|Mendoza|Misiones|Neuquen|Rio Negro|Salta|San Juan|San Luis|Santa Cruz|Santa Fe|Santiago del Estero|Tierra del Fuego|Tucuman"; 
 
s_a[10] = "Aragatsotn|Ararat|Armavir|Geghark'unik'|Kotayk'|Lorri|Shirak|Syunik'|Tavush|Vayots' Dzor|Yerevan"; 
 

 

 

 
function populateStates(countryElementId, stateElementId) { 
 

 
    var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex; 
 

 
    var stateElement = document.getElementById(stateElementId); 
 

 
    stateElement.length = 0; \t // Fixed by Julian Woods 
 
    stateElement.options[0] = new Option('Select State', ''); 
 
    stateElement.selectedIndex = 0; 
 

 
    var state_arr = s_a[selectedCountryIndex].split("|"); 
 

 
    for (var i = 0; i < state_arr.length; i++) { 
 
     stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]); 
 
    } 
 
} 
 

 
function populateCountries(countryElementId, stateElementId) { 
 
// given the id of the <select> tag as function argument, it inserts <option> tags 
 
    var countryElement = document.getElementById(countryElementId); 
 
    countryElement.length = 0; 
 
    countryElement.options[0] = new Option('Select Country', '-1'); 
 
    countryElement.selectedIndex = 0; 
 
    for (var i = 0; i < country_arr.length; i++) { 
 
     countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]); 
 
    } 
 

 
    // Assigned all countries. Now assign event listener for the states. 
 

 
    if (stateElementId) { 
 
     countryElement.onchange = function() { 
 
      populateStates(countryElementId, stateElementId); 
 
     }; 
 
    } 
 
} 
 

 
$(function() { 
 
    $(document).ready(function() { 
 
     var max_fields = 10; //maximum input boxes allowed 
 
     var wrapper = $("#raghav"); //Fields wrapper 
 
     var add_button = $(".addmore"); //Add button ID 
 

 
     var x = 1; //initlal text box count 
 
     $(add_button).click(function (e) { //on add input button click 
 
      e.preventDefault(); 
 
      if (x < max_fields) { //max input box allowed 
 
       x++; //text box increment 
 
       $(wrapper).append('Select Country: <select id="country'+x+'" name="country" class="country"></select> | Select State: <select id="state'+x+'" name="state" class="state"></select></br>'); 
 
       populateCountries("country"+x+"", "state"+x+""); 
 
      } 
 
     }); 
 

 
     $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
 
      e.preventDefault(); 
 
      $(this).parent('div').remove(); 
 
      x--; 
 
     }) 
 
    }); 
 

 
}); 
 
populateCountries("country", "state");

<div class="row" id="addparts"> 
 
    <div class="form-group" id="raghav"> 
 
     Select Country: <select id="country" name="country" class="country"></select> | Select State: <select name="state" id="state" class="state"></select></br> 
 
    </div> 
 
</div> 
 

 
<div class="button-div"> 
 
    <input type="button" name="addmore" class="addmore" value="Add More"> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>