Bootstrap-duallistbox动态获取数据

最新推荐文章于 2024-10-10 08:18:53 发布

「已注销」

最新推荐文章于 2024-10-10 08:18:53 发布

阅读量7.9k

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/qinshijangshan/article/details/80179602

版权

javaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何通过Ajax从服务器获取数据，并将其填充到Bootstrap-duallistbox中。提供了关于如何配置本地Ajax请求的支持链接，以及Bootstrap-duallistbox进行Ajax请求的相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax方式从服务器获取数据，填充到Bootstrap-duallistbox；

配置支持本地（file协议）的Ajax请求：https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html

Bootstrap-duallistbox ajax请求，参考：https://www.cnblogs.com/hangwei/p/5040866.html

https://www.cnblogs.com/Isabella-CC/p/8006912.html

role.json

[
  {
    "roleId":"1",
    "roleName":"系统管理员"
  },
  {
    "roleId":"2",
    "roleName":"董事长"
  },
  {
    "roleId":"3",
    "roleName":"董事长助理"
  },
  {
    "roleId":"4",
    "roleName":"总经理"
  },
  {
    "roleId":"5",
    "roleName":"总经理助理"
  },
  {
    "roleId":"6",
    "roleName":"财务-副总"
  },
  {
    "roleId":"7",
    "roleName":"部门经理"
  }
]

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bootstrap Dual Listbox</title>
  <link rel="stylesheet" href="../../public/bootstrap4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../../public/bootstrap-duallistbox/bootstrap-duallistbox.min.css">
  <script src="../../public/jquery-3.x.min.js"></script>
  <script src="../../public/bootstrap4/js/bootstrap.min.js"></script>
  <script src="../../public/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
  
</head>
<body class="container">
<h2>Dynamically Data</h2>

<div class="row">
  <div class="col-md-6">
    <select multiple="multiple" name="roleIds" id="roleIds">   
	</select>
  </div>
</div>

<script src="./duallistbox.js"></script>

<script>
$(function() {
  var requestUrl = "role.json";
  var reqeustParams = "";//有参数用json格式
  var selectElement = "#roleIds";
  var selectedDataStr = "1,2,4";//选中的option（用过英文逗号隔开；新增时，无选中option）
  //初始化duallistbox
  initListBox(requestUrl, reqeustParams, selectElement, 'roleId', 'roleName', selectedDataStr);
});
</script>
</body>
</html>

duallistbox.js

/** 
 * 初始化duallistbox
 * reqeustParams：查询参数
 * selectElement：select元素对应属性
 * optionValue
 * optionText
 * selectedDataStr：选中数据，值以,隔开
 */
function initListBox(url,reqeustParams,selectElement,optionValue,optionText, selectedDataStr) {
  $.ajax({
	type: 'POST',//请求方式
	url: url,//地址，就是json文件的请求路径
	data: reqeustParams,//请求参数
	async: true,//是否异步
	success: function (data) {
	  var objs = $.parseJSON(data);
	  var selector = $(selectElement)[0];
	  $(objs).each(function () {
		var o = document.createElement("option");
		o.value = this[optionValue];
		o.text = this[optionText];
		if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") {
		  var selectedDataArray = selectedDataStr.split(',');
		  $.each(selectedDataArray, function (i, val) {
			if (o.value == val) {
			  o.selected = 'selected';
			  return false;
			}
		  });
		}
		if(typeof(selector) != "undefined") {
			selector.options.add(o);
		}
	  });
	  
	  //渲染dualListbox
	  $(selectElement).bootstrapDualListbox({
		moveOnSelect: false,
		preserveSelectionOnMove: 'all',
		nonSelectedListLabel: 'Non-selected',
		selectedListLabel: 'Selected',
		selectorMinimalHeight: 200,
	  });
	},
	error: function (e) {
	  alert(e.msg);
	}
  });
}