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

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

编辑页-效果图:
后台传参与select-option标签的默认选中_第1张图片

代码如下:

<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>

你可能感兴趣的:(后台传参与select-option标签的默认选中)