关于AJAX做select联动的问题

Question

  我想做个2级联动的SELECT,但是做的效果不满意,请问大家有什么更好的办法没
我是这样做的
首先在JSP中
 <select id="state" name="state" onChange="isExist()">
         <option value="">Select</option>
         <option value="zj">浙江</option>
         <option value="zs">江苏</option>
 </select>
 <div id="city">//这里我是用DIV来控制的,所以觉得很不好,还会有回车
 <select id="ffe">
     <option value="">CITY</option>
 </select>SERVLET中:
StringBuffer sb = new StringBuffer();
if ("zj".equals(state)) {
sb.append("<select><option>hangzhou</option><option>huzhou</option></select>");
} else if ("zs".equals(state)) {
sb.append("<select><option>nanjing</option><option>yangzhou</option></select>");
}
其余的JS部分也不贴了,我想问下大家有没有什么办法把div那个标签给去掉了,而照样能实现吗?
直接用select id="",然后在后台直接写option是不行的,有什么好办法吗,最好举个例子谢谢

Answer 1

不用那个div.不要每回都重写整个select,只写option.返回的数据在servlet中组织好，只要option.innerHTML.

Answer 2

1楼能说的详细点吗?
我有点不太明白
如果用option.innerHTML那不是只能插进一个值吗?
还是你说的另有别的意思?
能稍微详细点吗?在此谢过了

Answer 3

function ajaxCallback(responseText){
    var temp = responseText.split(",");//responseText just like "hangzhou,huzhou,wenzhou"
var selObj = document.getElementById("ffe");
selObj.options.length = 0;
for(var i=0;i<temp.length;i++){
    selObj.options[selObj.options.length] = new Option(temp[i]);
}
}

Answer 4

可以引入js.在前台直接使用的是,用extjs
<select id="aaa" name="" onchange="changSelect();"></select>
  通过id,在js里面设置值到option里面。。

Answer 5

 $(document).ready(function()
{
   $("#bankid").change(function()
{
var bankBranchs=$("#bankBranchs");
bankBranchs.empty() ;
if($(this).val()!=0)
{
 $.post("AccountCreateAction_queryBankBranchName.action", {'bankid':$(this).val()}, function(xml)
{
$(xml).find('bankBranchDTO').each(function()
{
var $xml = $(this);
var bankBranchId = $xml.find('bankBranchId').text();
var bankBranchName = $xml.find('bankBranchName').text();
bankBranchs.append("<option value="+ bankBranchId +">"+ bankBranchName +"</option>");
});

});
}
});
});
这个是我做的一个银行和银行支行的2级联动是jquery做的<tr id="trA" style="display:'none'">
<td class="query_left_td02">银行名称：</td>
<td class="query_right_td02"><s:select id="bankid" name="bankacctbalancedto.bankId" list="banknamelist" listKey="bankId" listValue="name"></s:select></td>
<td class="query_left_td02">银行支行代码：</td>
<td class="query_right_td02"><s:textfield id="bankacctbalancedto.bankBranchId" name="bankacctbalancedto.bankBranchId" onblur="selectbankbranchname()" cssClass="textbox"></s:textfield></td>
</tr>
<tr id="trB" style="display:'none'">
<td class="query_left_td02">银行支行名称：</td>
<td class="query_right_td02"><s:select id="bankBranchs" name="bankacctbalancedto.bankBranchName" list="bankbranchnamelist" listKey="bankBranchId" listValue="bankBranchName" onchange="getBranchBankId()"></s:select></td>
<td class="query_left_td02">银行账号：</td>
<td class="query_right_td02"><s:textfield id="bankacctbalancedto.bankAcct" name="bankacctbalancedto.bankAcct" cssClass="textbox"></s:textfield></td>
</tr> 这个是表单 你要对照一下id private void getExeXStream(List<BankBranchDTO> bankbranchnamelist) throws Exception
{
 try
{
XStream xStream = new XStream();
response.setContentType("text/xml;charset=UTF-8");
StringBuilder sb = new StringBuilder();
sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
sb.append("<bankBranchs>");
for (BankBranchDTO bankBranchDTO : bankbranchnamelist)
{
xStream.alias("bankBranchDTO", BankBranchDTO.class);
sb.append(xStream.toXML(bankBranchDTO));
}
sb.append("</bankBranchs>");
response.getWriter().print(sb.toString());
        } catch (RuntimeException e) {
     e.printStackTrace();
           }
}这个是action中将后来返回的银行支行的list 返回前台的代码。

Answer 6

返回的字符串如下形式：str="hangzhou;huzhou;nanjing"回调函数中var array=str.split(";")然后循环添加option;
我通常直接追加innerHTML
for(var i=0;i<array.length;i++)
{
    document.getElementById("select").innerHTML+="<option>"+array[i]+"</option>";
}大概是这样。