如何使用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); 
    } 
); 

}