求帮忙把下面的json写成一个select三级联动，包含JS、html代码。
发布网友
发布时间：2022-05-16 08:33
共2个回答
懂视网
时间：2022-05-16 12:54
[html]
<div class="forntName">部门</div>
<div class="inpBox">
<select name="department" id="department" onchange="change();" style="width:200px;" >
<option value='-1'>请选择</option>
<s:iterator value="departmentList">
<option value='<s:property value="departmentCode"/>'><s:property value="departmentName"/></option>
</s:iterator>
<select>
</div>
<span style="white-space:pre"> </span><div class="forntName">人员</div>
<div class="inpBox">
<select name="workorderOperator" id = "workorderOperator" style="width:200px;">
<s:iterator value="userList">
<option value='<s:property value="userName"/>'><s:property value="userName"/></option>
</s:iterator>
</select>
</div>
部门下拉框的onchange()事件走一个AJAX方法，返回一个JSON对象(JSON里放的是个LIST)。
js方法在此页面的写法:
[javascript]
<script type="text/javascript">
function change(){
var departmentCode =$("#department").val();
var params = {
'departmentCode':departmentCode
};
$.ajax({
type: 'get',
url: "departmentChangeEvent.shtml",
cache: false,
data: params,
dataType: 'json',
success: function(data){
var sel2 = $("#workorderOperator");
sel2.empty();
if(data==null)
{
sel2.append("<option value = '-1'>"+"部门人员为空"+"</option>");
}
var items=data.list;
if(items!=null)
{
for(var i =0;i<items.length;i++)
{
var item=items[i];
sel2.append("<option value = '"+item.userName+"'>"+item.userChinesename+"</option>");
};
}
else
{
sel2.empty();
}
},
error: function(){
return;
}
});
//$.post(url, params, callback);
}
[javascript]
</script>
此处返回的data里包含list(list见后文)，list里包含着人员的代码，人员的姓名两个属性。然后先把人员下拉框empty()，通过select控件append方法 添加新的下拉框元素。
后台代码:
[java]
public String departmentChangeEvent() throws Exception{
userList=service.queryForList("Workorder.queryUserByDepartmentCode", departmentCode);
if(userList!=null&&userList.size()>0)
{
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Cache-Control", "no-store");
PrintWriter writer = response.getWriter();
JSONObject json = new JSONObject();
Map map = new HashMap();
map.put("list",userList);
JSONObject jso = JSONObject.fromObject(map);
writer.write(jso.toString());
writer.flush();
writer.close(); }
return null;
}
这个方法是部门切换事件，通过departmentCode(field域，有set,get)来求的当前部门下的用户放到userList中。www.2cto.com
然后通过标准写法把userList放到一个定义好的HashMap中，KEY为list。
[java]
<strong> JSONObject jso = JSONObject.fromObject(map);</strong>
这是最为关键的一步，有的json对象创建方法也可以为JSONObject jso = new JSONObject() ； 然后把list里的记录放入到jso中。。。
在这里是行不通的，前台会认为返回的是个字符串。。。
struts中 返回类型为json
[html]
<action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent">
<result type="json">
</result>
</action>
热心网友
时间：2022-05-16 10:02
<div>
<select id="select1">
<option value="">--请选择--</option>
</select>
<select id="select2">
<option value="">--请选择--</option>
</select>
<select id="select3">
<option value="">--请选择--</option>
</select>
</div>
Jquery js代码:
$(function () {var json = '[{"name":"jack","brand":"jack","bname":"\u5c0f\u660e"},{"name":"Black","brand":"Black","bname":"\u5c0f\u9ed1"},' +
'{"name":"Shawshank","brand":"Shawshank","bname":"\u5f20\u4f1f"},{"name":"Xiao Gang","brand":"Xiao Gang",' +
'"bname":"\u5c0f\u521a"},{"name":"Cockroach","brand":"Cockroach","bname":"\u5c0f\u667a"},' +
'{"name":"Depp","brand":"Depp","bname":"\u5c0f\u718a"},{"name":"Mary","brand":"Mary","bname":"\u5c0f\u4e3d"},' +
'{"name":"Minghao","brand":"Minghao","bname":"\u5c0f\u80d6"},{"name":"Lu Yi","brand":"Lu Yi","bname":"\u963f\u534e"},' +
'{"name":"Andy","brand":"Andy","bname":"\u534e\u4ed4"}]';
var object = $.parseJSON(json);
var $select1 = $("#select1");
var $select2 = $("#select2");
var $select3 = $("#select3");
$.each(object,function(i,item){
var option1 = '<option data-id="'+i +'" value="'+ item.bname+'">' +item.bname +'</option>';
$select1.append(option1);
var option2 = '<option data-id="'+i +'" value="'+ item.name+'">' +item.name +'</option>';
$select2.append(option2);
var option3 = '<option data-id="'+i +'" value="'+ item.brand+'">' +item.brand +'</option>';
$select3.append(option3);
})
$select1.on('change',function(){
var select_id = $(this).find("option:selected").attr("data-id");
$select2.find("[data-id="+ select_id +"]").attr("selected","true");
$select2.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
$select3.find("[data-id="+ select_id +"]").attr("selected","true");
$select3.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
})
$select2.on('change',function(){
var select_id = $(this).find("option:selected").attr("data-id");
$select1.find("[data-id="+ select_id +"]").attr("selected","true");
$select1.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
$select3.find("[data-id="+ select_id +"]").attr("selected","true");
$select3.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
})
$select3.on('change',function(){
var select_id = $(this).find("option:selected").attr("data-id");
$select1.find("[data-id="+ select_id +"]").attr("selected","true");
$select1.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
$select2.find("[data-id="+ select_id +"]").attr("selected","true");
$select2.find("[data-id="+ select_id +"]").siblings().removeAttr("selected");
})
})
我是直接取到你的json，然后解析 循环组成下拉框的，
选择任意一个下拉框，其他下拉框的值都会对应改变，不知道你想要的联动的效果是不是这样
的，有疑问可以再问我
