改的 jquery 无限级动态关联下拉选择框（支持设置默认值）

分享未结置顶
 1  4506
番茄 VIP 1 2018-03-31
悬赏：0
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title></title>
</head>
<body>
<h4>没有默认值</h4>
<div id="eleID"></div>
<h4>有默认值</h4>
<div id="init"></div>
<script>
//无限级动态下拉选择框
(function ($) {
  $.fn.AddSelect = function (opation) {
    var _arg = $.extend({
      data: ""
      ,selected: []
      ,id: "id"
      ,name: "name"
      ,cell: "cell"
    }, opation);
    var $selector = this;
    if (_arg.data) {
      var _dt = _arg.data,_a = _arg.id,_b=_arg.name,_c=_arg.cell;
      var _selectedArr= typeof _arg.selected == "string" ? _arg.selected.split("_") : _arg.selected;
      var _prams = [];
      _prams[0] = _dt;
      var _html = '<select>'; //初级设置
      _html += '<option>请选择</option>';
      for (var i = 0; i < _dt.length; i++) {
        _html += '<option index="'+ (_dt[i][_c] == null ? '' : i) + '" ';
        _html += 'value="' + _dt[i][_a] +'">'; 
        _html += _dt[i][_b];
        _html += '</option>';
      }
      _html += '</select>';
      $($selector).html(_html);
      
      //默认值设置
      var optVal = _selectedArr.shift();
      $($selector).children("select").last().find("option[value="+optVal+"]").attr("selected","selected"); 
      
      for(var ii=0; ii<=_selectedArr.length; ii++){
        //当前的索引值
        var _val = $($selector).children("select").last().find("option:selected").attr('index');                     
        if (_val % 1 == 0 && _val != '') {
          var _index = ii;//当前是第几个select
          _prams[_index + 1] = _prams[_index][_val][_c];//一条线放一个数组 不同线重置
          var _html = '<select>';
          _html += '<option>请选择</option>';
          for (var i = 0; i < _prams[_index + 1].length; i++) {
            _html += '<option index="'+ (_prams[_index + 1][i][_c] == null ? '' : i) + '" ';
            _html += 'value="' + _prams[_index + 1][i][_a] + '">';
            _html += _prams[_index + 1][i][_b];
            _html += '</option>';
          }
          _html += '</select>';
          $($selector).append(_html);
          $($selector).children("select").last().find("option[value="+_selectedArr[ii]+"]").attr("selected","selected"); 
        }
      }

      //绑定change事件
      function selectChange() {
        $($selector).children("select").change(function () {
          var _this = this;
          var _val = $(_this).find("option:selected").attr('index');//当前的索引值
          $(_this).nextAll("select").remove();
          if (_val % 1 == 0 && _val != '') { //如果值不为null
            var _index = $(_this).index();//当前是第几个select
            _prams[_index + 1] = _prams[_index][_val][_c];//一条线放一个数组 不同线重置
            var _html = '<select>';
            _html += '<option>请选择</option>';
            for (var i = 0; i < _prams[_index + 1].length; i++) {
              _html += '<option index="'+ (_prams[_index + 1][i][_c] == null ? '' : i) + '" ';
              _html += 'value="' + _prams[_index + 1][i][_a] +'">'; 
              _html += _prams[_index + 1][i][_b];
              _html += '</option>';
            }
            _html += '</select>';
            $(_this).after(_html);
            $($selector).children("select").unbind("change");
            selectChange();
          }
        })
      }
      selectChange();
    }
  }
})(jQuery);



// json分类数据格式（从PHP生成的json数据）
	var _json =[{"id":"1","title":"我有下级1","children":[{"id":"3","title":"我有下级2","children":[{"id":"8","title":"我有下级3","children":[{"id":"9","title":"没有下级了4"}]}]},{"id":"4","title":"新闻一级1","children":[{"id":"10","title":"55","children":[{"id":"11","title":"551","children":[{"id":"13","title":"321"}]}]}]},{"id":"5","title":"动态一"}]},{"id":"2","title":"文章","children":[{"id":"7","title":"6666"}]},{"id":"6","title":"哈哈哈"},{"id":"12","title":"12"}];

  
  
// 调用方法
$("#eleID").AddSelect({
		data: _json //json分类数据
		,id: "id" //id键名
		,name: "title" //名称键名
		,cell: "children" //下级数据键名
});

// 调用方法
$("#init").AddSelect({
		data: _json //json分类数据
    ,selected: "1_3_8_9"
		,id: "id" //id键名
		,name: "title" //名称键名
		,cell: "children" //下级数据键名
});


</script>
</body>
</html>
回帖
改的 jquery 无限级动态关联下拉选择框（支持设置默认值）

温馨通道

最近回贴

友情链接
