Автоматическое изменение выпадающего меню, HTML

Question

У меня есть 2 ниспадающего меню, которое выглядит следующим образом:

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

меню Деталь имеет два значения, которое «Сервер» и «Switch». Между тем, значение в меню «Модель» зависит от значения в меню «Элемент». Значение в меню модели вызывается из базы данных. То, что я хочу сделать, - это когда выбран «Сервер», он будет вызывать данные из таблицы серверов в меню «Модель» и когда выбран «Переключатель», он будет вызывать данные из таблицы коммутаторов. Как я могу это сделать?

Answer 1

У вас должен быть вызов ajax для обновления окна выбора.

Функция JavaScript на поле выбора товаров для вызова ajax.

Для справки: 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.js и включить его на странице, имеющей выше код следующим образом:

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

код crlist.js:

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> 

Это мой собственный сценарий, и я предполагал, что вы создали страну и региональные таблицы. Но вам нужно настроить запросы и код выше в соответствии с вашей структурой db.

Ссылка на мой ответ: Cascade Dropdown List using jQuery/PHP

Надеется, что это помогает.