在選擇其他下拉列表時填充下拉列表

Question

我有兩個下拉框。我想在第一個下拉框中選擇第二個下拉框。我的值正在從數據庫中檢索。這可能沒有使用PHP或我需要中間ajax和PHP文件從第一個下拉和填充值文件中獲取值。或者這可以不使用PHP我的意思是隻使用JQuery。請給我暗示這樣做。

假設我有2個國家。首先是印度，其次是美國。打開第一個下拉菜單我選擇了國家，如果第一個下拉菜單比第二個下拉菜單選擇了其各自的狀態。

Answer 1

你可以這樣做。如果你不想使用ajax，只需將每個選項加載到一個對象中即可。然後，當您從選擇＃1中選擇某個內容時，請使用來自對象的相關數據組填充＃2。

如果我這樣做，我不會用ajax做，除非有數據TON。

Answer 2

讓我們舉一個簡單的例子，我將它用於您想要的相同目的，它的工作原理非常好。

這是國家下拉菜單：

<?php 
     $countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC"); 
     echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>"; 
     while($clist=mysql_fetch_array($countrylist)) 
     { 
      echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>"; 
     } 
     echo "</select>"; 
?> 

這是區域下拉菜單：

<select name="region" id="region" ></select> 

現在做一個名爲crlist.js一個單獨的文件，並將其包括在具有上述這樣的代碼頁：對於crlist.js

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

代碼：

var request = false; 
/*@cc_on @*/ 
/*@if (@_jscript_version >= 5) 
try { 
request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
try { 
request = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e2) { 
request = false; 
} 
} 
@end @*/ 
function fillSelect(country,path) { 
var url = path+"crlist.php?country=" + country; 
request.open("GET", url, true); 
request.onreadystatechange = go; 
request.send(null); 
} 

function go() { 
if (request.readyState == 4) { 
//if (request.status == 200) { 

var response = request.responseText; 

var list=document.getElementById("region"); 
      for (i = list.length - 1; i>=0; i--) { 
       list.remove(i); 
      } 
var records=response.split('|'); 
for (i=1; i<records.length; i++) { 
    //alert("rcord="+records[i]); 
    var record=records[i].split('*'); 
    var region=record[0]; 
    //alert("region="+region); 
    var regionid=record[1]; 
    //alert("regionid="+regionid); 
    var x=document.createElement('option'); 
    //var y=document.createTextNode(region); 
    x.text=region; 
    //x.value=region; 
    //alert(x.text); 
    //x.appendChild(y); 
    //list.appendChild(x); 
    list.options.add(x); 
    } 
    //} 
} 
} 

function initCs(path) { 

if (!request && typeof XMLHttpRequest != 'undefined') { 
request = new XMLHttpRequest(); 
} 
var country=document.getElementById('country'); 
    country.onchange=function() { 

     if(this.value!="Select") { 

      var list=document.getElementById("region"); 
      for (i = list.length - 1; i>=0; i--) { 
       list.remove(i); 
      } 
     //while (list.childNodes[0]) { 
     //list.removeChild(list.childNodes[0]); 
     //} 
     } 
     fillSelect(this.value,path); 
     //alert(this.value); 

    } 
//fillSelect(country.value); 
} 

現在創建一個名爲crlist.php的單獨文件。

代碼crlist.php：

<?php 
require_once 'yourconfigfile.php'; 

$cname = $_GET['country']; 

$query="select ID,Name from city where CountryCode=(select code from country where name='$cname') Order By Name ASC"; 
$res = mysql_query($query) or die(mysql_error()); 
while($region = mysql_fetch_array($res)){ 
    echo "<option value='".$region['Name']."'>".$region['Name']."</option>"; 
}  
?> 

現在添加以下的有頁面的下拉列表中的腳本：

<script type="text/javascript" src="crlist.js"> </script> 
<script> 
$(document).ready(function() { 

    initCs(""); 

}); 
</script> 

這是我自己的劇本，而且我認爲你已經創建的國家和地區表。但你需要根據你的數據庫結構調整查詢和上面的代碼。

參考我的答案：Cascade Dropdown List using jQuery/PHP

希望這有助於。

Answer 3

如果您編碼您的數據轉換成JSON格式，那麼你可以做這樣的事情：

爲HTML：

<select name='country' id='country'> 
    <option value='india'>India</option> 
    <option value='usa'>USA</option> 
</select> 
<select name='dates' id='dates'> 
</select> 

的jQuery：

data = { 
    india: ['2011-03-11','2010-02-01'], 
    usa: ['2006-03-11','2009-02-01'] 
} 

$('#country').change(function(){ 
    var dateopts = '' 
    $.each(data[$(this).val()],function(i,v){ 
     dateopts += "<option value='"+v+"'>"+v+"</option>" 
    }) 
    $('#dates').html(dateopts) 
}) 

，當該國正在改變將構建並填充第二個選擇框的選項。

參見這裏的工作實施例：http://jsfiddle.net/xHxcD/

---

上述方法需要所有的數據被髮送到客戶端側的初始頁面請求。如果你有很多數據，通過AJAX接收數據會更好。通過在PHP中構建一個與客戶端數據結構相同的對象來實現這一點最爲簡單，然後使用json_encode將其轉換爲JSON字符串並將其回顯出來。

閱讀到您的客戶端這將被如此簡單：

$.ajax('myJsonData.php?country=india',function(jsonData){ data.india = jsonData }) 

Answer 4

是的，你可以不用使用PHP。爲此，您必須在JavaScript數組中分配兩個不同的狀態列表，並根據所選內容更改另一個選擇框中的選項。就如此容易。

如果您使用數據庫存儲狀態，則可以在加載頁面時使用服務器端腳本語言分配javascript數組。

但是，除非您的數據量非常小，否則不要這樣做。在你的情況下，你只有2個國家，所以你可以繼續。