バックエンドの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ダイナミックへの小さな導入であり、私はそれがあなたが何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます、あなたを助けることを願っています。ここでも、スクリプトの家庭用ウェブサイトのサポートに非常に感謝します
この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください!ありがとうございました。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン