自動変更ドロップダウンメニュー、HTML

Question

は、私はこのように見えるダウンメニュー2ドロップする必要があります。

a drop down http://img401.imageshack.us/img401/3786/90550627.jpg

項目メニューは、「サーバー」と「スイッチ」である2つの値を持ちます。一方、Modelメニューの値は、Itemメニューの値によって異なります。モデルメニューの値は、データベースから呼び出されます。私がしたいのは、 "Server"が選択されている場合、サーバーテーブルのデータをModelメニューに呼び出し、 "Switch"を選択すると、スイッチテーブルからデータを呼び出します。どうやってやるの？

Answer 1

選択ボックスを更新するには、ajaxコールが必要です。

ajaxを呼び出す項目選択ボックスのJavaScript機能。あなたの参考のために

：http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

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.phpという名前の別々のファイルを作る

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.jsという名前と、このようなコードの上にあるページに含める：crlist.jsため

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

コード。

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> 

これは私自身のスクリプトであり、そして私はあなたが国を作成したと仮定しました地域テーブル。しかし、db構造に従ってクエリや上記のコードを微調整する必要があります。私の答えに

参考：Cascade Dropdown List using jQuery/PHP

は、この情報がお役に立てば幸いです。