1. ホーム
  2. Web プログラミング
  3. AJAX関連

バックエンドのAjaxから動的にデータを取得するbootstrap select2コード

2022-01-15 07:07:51

レンダリングでは

として実装された。

フロントエンドのコードです。

<div class="form-group">
 <label class="font-noraml">dynamic-multi-select</label> 
 <select id="bsselect2ID" name="bsselect2ID" class="form-control select2-multiple" 
  type="text" multiple data-live-search="true" >
 </select>
</div>
 
.....
<script th:inline="javascript">
 var url = ctx + "demo/form/select2";
 console.log(url)
 $(function() {
  var selectedValues = [];   
   $("#bsselect2ID:selected").each(function(){ 
   selectedValues.push($(this).val());  
   }); 
   
    $("#bsselect2ID").selectpicker({
      noneSelectedText : 'Please select' , // default display content
      // placeholder: 'Please select', // default text prompt
      // {#tags: true,// allow manual addition #}
      allowClear: true,// allowClear
    });
    loadnetdatas2();
    loadnetdatabs2(); //execute this function to get data from the backend, splice it into option tags, and add it to the select
    
    //initialize the refresh data
    $(window).on('load', function() {
     $('#bsselect2ID').selectpicker('val', ''); 
      $('#bsselect2ID').selectpicker('refresh');
    });
 
  });
 //var category = $.trim($('#select2ID option:selected').val());
 function loadnetdatabs2(){
      $.ajax({
        url : url, // path to request in backend controller
        type : 'GET',
        async : false,
        datatype : 'json',
        success : function(results) {
          if(results){
           var jsondata=results.data;
           //console.log(jsondata)
            var netnames = [];
            console.log(jsondata.length)
            for(var i=0,len=jsondata.length;i<len;i++){
              var netdata = jsondata[i];
              console.log(netdata)
                //splicing into multiple <option><option/>
                netnames.push('<option value="'+netdata.userId+'">'
      +netdata.userName+'</option>') 
            }
            $("#bsselect2ID").html(netnames.join(''));  
            //Populate the select tag according to the netID (write it according to your own ID)
            $('#bsselect2ID').selectpicker('val', ''); 
            $('#bsselect2ID').selectpicker('refresh');  
          }
        },
        error : function() {
          alert('Error in query');
        }
      });
    };
 </script>

バックエンドの実装コードです。

 /**
   * Dynamic get dropdown box content dropdown box
   */
  @GetMapping("/select2")
  @ResponseBody
  public Map<String,Object> selectDynamic()
  {
   Map<String,Object> infoMap=new HashMap<>();
   List<UsersModel> infoLists=new ArrayList<>();
   System.out.println("Start selecting... ");
   for(UserFormModel user:users) {
   UsersModel userModel=new UsersModel();
   userModel.setUserId(user.getUserId());
   userModel.setUserName(user.getUserName());
   infoLists.add(userModel);
   }
   infoMap.put("data", infoLists);
   return infoMap;
  }

概要

上記の背景Ajaxの動的取得データコードからブートストラップselect2ダイナミックへの小さな導入であり、私はそれがあなたが何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます、あなたを助けることを願っています。ここでも、スクリプトの家庭用ウェブサイトのサポートに非常に感謝します
この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください!ありがとうございました。