playframewor中两个下拉框的动态联动

1.html中代码，如

<tr>
<th>
公司名*<br>
</th>
<td>
<select name="company_name"  id="company_name" onchange="createSelect()">
#{list items:companyMap.keySet(), as:'key'}
<option value="${companyMap.get(key)}" >${companyMap.get(key)}</option>
#{/list}
</select>
</td>
</tr>
<tr>
<th>
父组*<br>
</th>
<td>
<select name="parent_id" id="parent_id">
#{list items:parentMap.keySet(), as:'key'}
<option value="${key}">${parentMap.get(key)}</option>
#{/list}
</select>
</td>
</tr>

想要通过公司名的改变，来改变父组里的值。这样就需要借助于js和ajax，如在select改变时调用createSelect()方法，在createSelect()方法中通过ajax来获取父组里显示的数据，写法如：

function createSelect(){
var company_select = document.getElementById("company_name");
var val = company_select.options[document.getElementById("company_name").selectedIndex].value;
       $.ajax({
             type: "get",
             url: "http:\/\/localhost:9000\/webservice/getCompanyParentGroupMap?company="+val,
             dataType: "json",
             success: function(data){
             createParentByCompany(data);
             }, error: function(){
                   alert("请求出错");
             }
       });
 };

父组动态显示：

function createParentByCompany(data){
var group_select = document.getElementById("parent_id");
group_select.options.length = 0;
for(var i = 0; i < data.length; ++i){
var option =  document.createElement("OPTION"); 
option.value = data[i].group_id;
option.text = data[i].group_name;
group_select.options.add(option);
}
 };

在url请求的返回地址中，返回了请求后的json数据，这样就实现了两个下拉框的动态联动~