后台传参与select-option标签的默认选中

从后台传递过来的参数是数据的详情页，在编辑页的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>