AdminLTE3 select2を複数生成

AdminLTE3を使って、select2を複数追加できるように作成してみました。
この記事が少しでも解決の役に立てれば幸いです。

Contents

1 完成イメージ
2 実際のコード header部
3 実際のコード css
4 実際のコード Content部
5 実際のコード footer部

完成イメージ

https://adminlte3.wbscustom.com/select2.php

※追加ボタンを押すとselect2で設定したセレクトボックスが複製され、番号を振り直します

※削除ボタンを押すとレコードが削除され番号を振り直します

実際のコード header部

AdminLTE3の「starter」に追加するコード。

<!-- オリジナル style -->
<link rel="stylesheet" href="./css/style.css">
 
<!-- Select2 -->
<link rel="stylesheet" href="./AdminLTE/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="./AdminLTE/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Select2 -->
<script src="./AdminLTE/plugins/select2/js/select2.full.min.js"></script>

実際のコード css

.select2-container .select2-selection--single {
	height: 40px!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 37px!important;
    right: 8px!important;
}

.label-box {
	position: relative;
	margin-bottom: 0;
}

.label-box-rght {
	position: absolute;
	right: 10px;
	top: 0px;
}

.label-box-rght button {
	padding: 3px 6px;
	font-size: 0.9em;
}

実際のコード Content部

1.追加を押す事でリストNoのname要素とvalue要素に番号を振り直す

2.セレクトボックスのname要素に番号を振り直す

<div class="col-lg-6">
  <div class="card card-primary card-outline">
    <div class="card-header">
      <h5 class="m-0">Select2</h5>
    </div>
    <div class="card-body">
      <div class="form-group label-box">
        <label class="midashi">店舗(必須)</label>
        <span class="label-box-rght"><button type="button" class="btn btn-outline-info add_btn">追加</button></span>
      </div>
      <div class="card card-success">
        <!-- /.card-header -->
        <div class="card-body p-0">
          <table class="table table-condensed">
            <tbody>
              <tr>
                <th style="width: 10px">No</th>
                <th>店舗</th>
                <th style="width: 83px;font-size: 0.9em;">削除</th>
              </tr>
              <tr id="fire">
                <td class="nolist"><span id="parent">1</span>
                  <input type="hidden" name="nolist1" value="1">
                </td>
                <td id="select" class="shop_name">
                  <select class="select2 select2-danger" data-dropdown-css-class="select2-danger" style="width: 100%;"name="shop_name1">
                    <option selected="selected">美容室</option>
                    <option>美容室２</option>
                    <option>居酒屋</option>
                    <option>居酒屋２</option>
                    <option>百貨店</option>
                    <option>百貨店２</option>
                  </select>
                </td>
                <td>
                  <button type="button" style="font-size: 0.8em;padding: 8px 3px" class="btn btn-block btn-outline-danger remove">削除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- /.card-body -->
        </div>
      </div>
      <script type="text/javascript">
        // 追加
        $(function() {
          $('.add_btn').on('click', function(){
            $clone = $( "#fire" ).clone().appendTo( "tbody" );
            $clone.find("#select span").remove();
            $clone.find(".select2").select2();
            $('.select2').select2();

            $('.nolist input').each(function(i){
                $(this).attr('value',(i+1));
            });
            $('.nolist input').each(function(i){
                $(this).attr('name','nolist' + (i+1));
            });
            $('.shop_name select').each(function(i){
                $(this).attr('name','shop_name' + (i+1));
            });
            $('.nolist span').each(function(i){
                $(this).text(+ (i+1));
            });
          });
        });

        // 削除
        $(function(){
            $(document).on('click', '.remove', function() {
              $(this).parents('tr').remove();   
              $('.nolist input').each(function(i){
                  $(this).attr('value',(i+1));
              });
              $('.nolist input').each(function(i){
                  $(this).attr('name','nolist' + (i+1));
              });
              $('.shop_name select').each(function(i){
                  $(this).attr('name','shop_name' + (i+1));
              });
              $('.nolist span').each(function(i){
                  $(this).text(+ (i+1));
              });
            });
        });
      </script>
    </div>
  </div>
</div>
<!-- /.col-md-6 -->

実際のコード footer部

<script>
  $(function () {
    $('.select2').select2();
  })
</script>