从后台传递过来的参数是数据的详情页，在编辑页的select下拉框汇总既要显示所有的选项，又要默认显示选中项，后台传递过来的value值与option的value值相同时就默认选中（即给option标签添加selected=”selected”属性）。

编辑页-效果图：

代码如下：

<div class="form-group"><label class="col-sm-2 control-label"><font color="red">* </font>主类 名称 </label><div class="col-sm-4"><select name="main_id" id="main_id" class="text input-large form-control"><option value=""></option></select></div><label class="col-sm-2 control-label"><font color="red">* </font>亚类 名称 </label><div class="col-sm-4"><select name="next_id" id="next_id" class="text input-large form-control"><option value="">请选择亚类</option></select></div></div><div class="form-group"><label class="col-sm-2 control-label"><font color="red">* </font>基本类名称</label><div class="col-sm-4"><select name="basic_id" id="basic_id" class="text input-large form-control"><option value="">请选择基本类</option></select></div><label class="col-sm-2 control-label"><font color="red">* </font>基本类代码</label><div class="col-sm-4"><input name="basic_code" value="" id="basic_code" autocomplete="off" class="text input-large form-control" placeholder="类代码根据国际自动生成" type="text" readonly="readonly"></div><input type="hidden" value="{$main_list['id']}" id="main_id2" /><!--主类--><input type="hidden" value="{$next_list['id']}" id="next_id2" /><!--亚类--><input type="hidden" value="{$basic_list['id']}" id="basic_id2" /><!--基本类-->
<script type="text/javascript">
//获取主类、亚类、基本类和基本类代码
//页面加载完毕后ajax向后台传参
$(function(){$.ajax({type:'post',url:"{:U('Tour/main_data')}",dataType:"json",data:{pid:0},success:function(data){// console.log(data);$("#main_id").empty();$("#main_id").append("<option value=''>请选择主类</option>");for(var i=0;i<data.length;i++){$("#main_id").append('<option value='+data[i].id+'>'+data[i].class_name+'</option>');}//遍历option，找到与后台参数相同的value值，并添加selected属性var main_id2 = $('#main_id2').val();var length= $('#main_id option').length;for(var a=0;a<length;a++){var option_main = $('#main_id option').eq(a).val();if(main_id2 == option_main){$('#main_id option').eq(a).attr('selected','selected');}}//判断主类并获取亚类数据var main_id = $("#main_id").val();if(main_id != ''){$.ajax({type:"POST",url:"{:U('Tour/next_data')}",dataType:"json",data:{main_id:main_id},success:function(data){// console.log(data);$("#next_id").empty();$("#next_id").append("<option value=''>请选择亚类</option>");for(var i=0;i<data.length;i++){$("#next_id").append('<option value='+data[i].id+'>'+data[i].class_name+'</option>');}//遍历option，找到与后台参数相同的value值，并添加selected属性var next_id2 = $('#next_id2').val();var length2 = $('#next_id option').length;for(var b=0;b<length2;b++){var option_next = $('#next_id option').eq(b).val();if(next_id2 == option_next){$('#next_id option').eq(b).attr('selected','selected');}}//判断亚类并获取基本类数据var next_id = $("#next_id").val();// console.log(next_id);if(next_id != ''){$.ajax({type:"POST",url:"{:U('Tour/basic_data')}",dataType:"json",data:{next_id:next_id},success:function(data){// console.log(data);$("#basic_id").empty();$("#basic_id").append("<option value=''>请选择基本类</option>");for(var i=0;i<data.length;i++){$("#basic_id").append('<option value='+data[i].id+' code='+data[i].basic_code+' >'+data[i].class_name+'</option>');}//遍历option，找到与后台参数相同的value值，并添加selected属性var basic_id2 = $('#basic_id2').val();var length3 = $('#basic_id option').length;for(var c=0;c<length3;c++){var option_basic = $('#basic_id option').eq(c).val();if(basic_id2 == option_basic){$('#basic_id option').eq(c).attr('selected','selected');$("#basic_code").val($("#basic_id").find("option:selected").attr("code"));}}//失去焦点后，获取value值并进行下一步操作$("#basic_id").on("change",function(){$("#basic_code").val($("#basic_id").find("option:selected").attr("code"));})}});}else{$("#basic_id").empty();$("#basic_id").append("<option value=''>请选择基本类</option>");$("#basic_code").val('');}}});}else{$("#next_id").empty();$("#next_id").append("<option value=''>请选择亚类</option>");$("#basic_id").empty();$("#basic_id").append("<option value=''>请选择基本类</option>");$("#basic_code").val('');}}});
//主类select框失去焦点后
$("#main_id").on("change",function(){var main_id = $("#main_id").val();if(main_id != ''){$.ajax({type:"POST",url:"{:U('Tour/next_data')}",dataType:"json",data:{main_id:main_id},success:function(data){// console.log(data);$("#next_id").empty();$("#next_id").append("<option value=''>请选择亚类</option>");for(var i=0;i<data.length;i++){$("#next_id").append('<option value='+data[i].id+'>'+data[i].class_name+'</option>');}}});}else{$("#next_id").empty();$("#next_id").append("<option value=''>请选择亚类</option>");$("#basic_id").empty();$("#basic_id").append("<option value=''>请选择基本类</option>");$("#basic_code").val('');}
})
//亚类select框失去焦点后
$("#next_id").on("change",function(){var next_id = $("#next_id").val();// console.log(next_id);if(next_id != ''){$.ajax({type:"POST",url:"{:U('Tour/basic_data')}",dataType:"json",data:{next_id:next_id},success:function(data){// console.log(data);$("#basic_id").empty();$("#basic_id").append("<option value=''>请选择基本类</option>");for(var i=0;i<data.length;i++){$("#basic_id").append('<option value='+data[i].id+' code='+data[i].basic_code+' >'+data[i].class_name+'</option>');}}});}else{$("#basic_id").empty();$("#basic_id").append("<option value=''>请选择基本类</option>");$("#basic_code").val('');}
})
//基本类select框失去焦点后
$("#basic_id").on("change",function(){$("#basic_code").val($("#basic_id").find("option:selected").attr("code"));
})
</script>