如何使用jquery根據第一個選擇的選項填充第二個選擇列表

Question

我想動態更改第二個選擇列表中的選項，使用jQuery取決於第一個選擇列表中的哪個項目被選中。

第二個選擇列表中還需要有optgroups。

我該怎麼做呢？

謝謝

Answer 1

有一些插件可以做到這一點。搜索鏈接的選擇列表。

一個例子可以在這裏找到http://manuel.radiohead.cl/proyectos/jquery/popdrodown/

Answer 2

下面是使用JSON作爲數據交換格式的例子。你可以使用XML，JSON，HTML甚至通過javascript來評估。

PHP：

$searchParam = $_GET['SEARCH_PARAM']; 

//Get the matching results for the secondselect from your database 
$results = $DB->query('Select ID, NAME, GROUP from mytable where parent = ?', $searchParam); 

//If you're using a PHP 5.2 or a newer version you have the json_encode function 
print json_encode($results); 

HTML：

<select id="firstselect" onchange="myfunc();"> 
    <option value="">Select one...</option> 
    <option value="1">One option</option> 
    <option value="2">Second choice</option> 
</select> 

<select id="secondselect"></select> 

的Javascript：

function myfunc() { 
    var value = $("#firstselect").val(); 
    $.get("myjsonprovider.php", 
    {SEARCH_PARAM: value }, 
    dataType: "JSON", 
    function(data) { 
     var options = '<option value="">Select one...</option>'; 
     var optgroup = data[0].GROUP; 
     options += '<optgroup label="' + data[i].GROUP + '">'; 
     for(var i = 0; i < data.length; i++) { 
     if(optgroup != data[i].GROUP) { 
      options += '</optgroup><optgroup label="'+data[i].GROUP+'">'; 
     } 
     options += '<option value="' + records[i].ID +'">'+data[i].NAME+'</option>'; 
     } 
     options += '</optgroup>'; 
     $("#secondselect").html(options); 
    } 
); 

}