お互いに関連する2つのメニューを静的から動的に変換します

私はお互いに関連する2つの選択リストを持っています。最初のものは国と第二1が自動に市内を示している、これは選択リストである：country.phpお互いに関連する2つのメニューを静的から動的に変換します

<script type= "text/javascript" src = "countries.js"></script> 

<body> 
    <div align="center"> 
     Select Country (with states): 
     <select id="country" name="country"></select> 
     <br/>State: 
     <select name="state" id="state"></select> 
     <br/> 
     <script language="javascript"> 
      populateCountries("country", "state"); 
      populateCountries("country2"); 
     </script> 
     </div> 
</body>

は、これは、Javaスクリプトファイルです：countries.js

// Countries 
var country_arr = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Argentina"); 

// States 
var s_a = new Array(); 
s_a[0] = ""; 
s_a[1] = "Kabul|Kandahar|Herat|Mazar-i-Sharif|Kunduz|Taloqan|Jalalabad|Puli Khumri"; 
s_a[2] = "Tiranë|Durrës|Vlorë|Elbasan|Shkodër|Fier|Kamëz|Korçë|Berat|Lushnjë"; 
s_a[3] = "Algiers|Oran|Constantine|Annaba|Blida|Batna|Djelfa|Sétif|Biskra"; 
s_a[4] = "Canillo|L'Aldosa|L'Armiana|Bordes d'Envalira|El Forn|Incles|Meritxell|Molleres|Els Plans";      
s_a[5] = "Ambriz|Andulo|Bailundo|Balombo|Baía Farta|Benguela|Bibala |Bimbe|Biula|Bungo";         
s_a[6] = "Buenos Aires|Córdoba|Córdoba|Mendoza|La Plata|Tucumán|Mar del Plata|Salta"; 


function populateStates(countryElementId, stateElementId) { 

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

    var stateElement = document.getElementById(stateElementId); 

    stateElement.length = 0; // 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); 
     }; 
    } 
}

は、私はいくつかの方法がこれを変更することができます静的なリストを動的に選択する私はこのようなデータベースにデータを入力した：

INSERT INTO tbl_city_country (city_name,country_name) 
VALUES 
('kabol','Afghanistan')

おかげ

出典

2017-11-21 behzad

これは動作するコードですか？もしそうなら、スニペットを追加してください。また、達成しようとしているものは何ですか？ –

はい、私は静的から動的にテンプレートを変更したい場合は – behzad

私の答えを確認し、それが望んでいるかどうかを確認しますか？ –

を、私はあなたがドロップダウンメニューにオプションを挿入する方法を変更しました。あなたのコードを微調整しました。

希望これは

window.onload = loadScript(); 
 

 
function loadScript() { 
 
var country_arr =["Please Select Country","Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Argentina"]; 
 
populateCountries("country", "state"); 
 
populateCountries("country2"); 
 
// States 
 
var s_a = new Array(); 
 
s_a[0] = "Choose a Country"; 
 
s_a[1] = "Kabul|Kandahar|Herat|Mazar-i-Sharif|Kunduz|Taloqan|Jalalabad|Puli Khumri"; 
 
s_a[2] = "Tiranë|Durrës|Vlorë|Elbasan|Shkodër|Fier|Kamëz|Korçë|Berat|Lushnjë"; 
 
s_a[3] = "Algiers|Oran|Constantine|Annaba|Blida|Batna|Djelfa|Sétif|Biskra"; 
 
s_a[4] = "Canillo|L'Aldosa|L'Armiana|Bordes d'Envalira|El Forn|Incles|Meritxell|Molleres|Els Plans";      
 
s_a[5] = "Ambriz|Andulo|Bailundo|Balombo|Baía Farta|Benguela|Bibala |Bimbe|Biula|Bungo";         
 
s_a[6] = "Buenos Aires|Córdoba|Córdoba|Mendoza|La Plata|Tucumán|Mar del Plata|Salta"; 
 

 

 
function populateStates(countryElementId, stateElementId) { 
 

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

 
    var stateElement = document.getElementById(stateElementId); 
 

 
    stateElement.length = 0; // 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++) { 
 
     var node = document.createElement("option");  
 
     var textnode = document.createTextNode(state_arr[i]); 
 
     node.appendChild(textnode); 
 
     document.getElementById("state").appendChild(node); 
 
    } 
 
} 
 

 
function populateCountries(countryElementId, stateElementId) {  
 
    var countryElement = document.getElementById(countryElementId);  
 
    for (var i = 0; i < country_arr.length; i++) { 
 
     var node = document.createElement("option");  
 
     var textnode = document.createTextNode(country_arr[i]); 
 
     node.appendChild(textnode);   
 
     document.getElementById("country").appendChild(node); 
 
    } 
 

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

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

<body> 
 
    <div align="center"> 
 
     Select Country (with states): 
 
     <select id="country" name="country"></select> 
 
     <br/>State: 
 
     <select name="state" id="state"></select> 
 
     <br/> 
 
     <script language="javascript"> 
 
//   populateCountries("country", "state"); 
 
    //   populateCountries("country2"); 
 
     </script> 
 
     </div> 
 
</body>

出典

2017-11-21 09:05:49

OK助け、私は、選択リストに国を置くことができます。

<?php $query_country = "SELECT country FROM tbl_country"?> 
<select name="country"> 
    <?php do { ?> 
<option value="" ><?php echo $row['country']; ?></option> 
    <?php } while ($row = mysql_fetch_assoc($country)) ?> 
</select>

を今私はそれを置くことができる方法をいくつかのいずれかの国を選択すると、値を変数に代入する？ときにユーザーがメニューを選択して送信しないで？

出典

2017-11-21 13:48:56 behzad

お互いに関連する2つのメニューを静的から動的に変換します

答えて

関連する問題