jquery怎样实现ajax联动框(一)

前台页面

<script type=”text/javascript” src=”${rc.contextPath}/js/jquery.select.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#rwflSelect”).linkSelect({
nodata:”none”,
required:true,
firstUrl:’${rc.contextPath}/repair/loadCategory’,
secondUrl:’${rc.contextPath}/repair/loadSubCategory’,
firstValue:’$!{repair.categoryid}’,//任务大类
secondValue:’$!{repair.subcategoryid}’//人物小类
});
});
</script>
<tr id=”rwflSelect”>
<td width=”100″ class=”t_r prten field_c”>任务分类：</td>
<td width=”131″><select class=”first” name=’categoryid’></select> </td>
<td width=”10″></td>
<td width=”131″><select class=”second” name=”subcategoryid” disabled=”disabled”></select></td>
</tr>

附
jquery.select.js

/*
Ajax 三级联动
日期：2013-2-26
settings 参数说明
—–
firstUrl:一级下拉数据获取URL,josn返回
firstValue:默认一级下拉value
secondUrl:二级下拉数据获取URL,josn返回
secondValue:默认二级下拉value
thirdUrl:三级下拉数据获取URL,josn返回
thirdValue:默认三级下拉value
nodata:无数据状态
required:必选项
—————————— */
(function($){
$.fn.linkSelect=function(settings){
if($(this).size()<1){return;};
// 默认值
settings=$.extend({
firstUrl:”js/city.min.js”,
firstValue:null,
secondValue:null,
thirdValue:null,
nodata:null,
required:true
},settings);
var box_obj=this;
var first_obj=box_obj.find(“.first”);
var second_obj=box_obj.find(“.second”);
var third_obj=box_obj.find(“.third”);
var select_prehtml=(settings.required) ? “” : “<option value=”>请选择</option>”;
var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html+=”<option value='”+row.value+”‘>”+row.text+”</option>”;
});
return temp_html;
};
// 赋值二级下拉框函数
var secondStart=function(){
second_obj.empty().attr(“disabled”,true);
third_obj.empty().attr(“disabled”,true);
if(first_obj.val()==”){
return;
}
$.getJSON(settings.secondUrl, { firstValue: first_obj.val(), time: new Date().getTime() }, function(jsonResult){
if(!jsonResult.success){
if(settings.nodata==”none”){
second_obj.css(“display”,”none”);