从后台传递过来的参数是数据的详情页,在编辑页的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("");
for(var i=0;i"#main_id" ).append('+data[i].class_name+'');
}
//遍历option,找到与后台参数相同的value值,并添加selected属性
var main_id2 = $('#main_id2').val();
var length= $('#main_id option').length;
for(var a=0;avar 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("");
for(var i=0;i"#next_id").append('+data[i].class_name+'');
}
//遍历option,找到与后台参数相同的value值,并添加selected属性
var next_id2 = $('#next_id2').val();
var length2 = $('#next_id option').length;
for(var b=0;bvar 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("");
for(var i=0;i"#basic_id").append('+data[i].class_name+'');
}
//遍历option,找到与后台参数相同的value值,并添加selected属性
var basic_id2 = $('#basic_id2').val();
var length3 = $('#basic_id option').length;
for(var c=0;cvar 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("");
$("#basic_code").val('');
}
}
});
}else{
$("#next_id").empty();
$("#next_id").append("");
$("#basic_id").empty();
$("#basic_id").append("");
$("#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("");
for(var i=0;i"#next_id").append('+data[i].class_name+'');
}
}
});
}else{
$("#next_id").empty();
$("#next_id").append("");
$("#basic_id").empty();
$("#basic_id").append("");
$("#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("");
for(var i=0;i"#basic_id").append('+data[i].class_name+'');
}
}
});
}else{
$("#basic_id").empty();
$("#basic_id").append("");
$("#basic_code").val('');
}
})
//基本类select框失去焦点后
$("#basic_id").on("change",function(){
$("#basic_code").val($("#basic_id").find("option:selected").attr("code"));
})
script>