README

一个带有复选框的 jQuery 多选插件。

安装

	composer require gozoro/jquery-multiselect

使用

	<div style="width:400px">
	<select id="countries" name="countries" multiple placeholder="Select countries">
		<option value="110">Austria</option>
		<option value="111">Belarus</option>
		<option value="112">Bulgaria</option>
		<option value="113">China</option>
		<option value="114">Finland</option>
		<option value="115">France</option>
		<option value="116">Germany</option>
		<option value="117">Greece</option>
		<option value="118">Italy</option>
		<option value="119">Poland</option>
		<option value="120">Russia</option>
		<option value="121">Spain</option>
	</select>
	</div>

	<script>
		$(document).ready(function()
		{
			$("#countries").multiselect();
		});
	</script>';

使用选项

	<script>
		$(document).ready(function()
		{
			$("#countries").multiselect({selectedText:'Selected countries:', selectedTextMax:4});
		});
	</script>';

与 Bootstrap 3 使用

	<div style="width:400px">
	<select id="countries" name="countries" multiple placeholder="Select countries" class="form-control">
		<option value="110">Austria</option>
		<option value="111">Belarus</option>
		<option value="112">Bulgaria</option>
		<option value="113">China</option>
		<option value="114">Finland</option>
		<option value="115">France</option>
		<option value="116">Germany</option>
		<option value="117">Greece</option>
		<option value="118">Italy</option>
		<option value="119">Poland</option>
		<option value="120">Russia</option>
		<option value="121">Spain</option>
	</select>
	</div>

	<script>
		$(document).ready(function()
		{
			$("#countries").multiselect({selectedText:'Selected countries:', selectedTextMax:4, caretClass:'glyphicon glyphicon-menu-down'});
		});
	</script>';

与事件使用

	<script>
		$(document).ready(function()
		{
			$("#countries").multiselect({selectedText:'Selected countries:', caretClass:'glyphicon glyphicon-menu-down'});

			$("#countries").change(function()
			{
				console.log('change');
			});

		});
	</script>';

选项

• selectedTextMax: 明确输出的最大项目数。默认值：3。

• selectedText: 当选择的项目数大于 selectedTextMax 时显示的文本。默认值：已选择：。

• caretClass: 控件内小箭头的 CSS 类。例如：{caretClass:'glyphicon glyphicon-menu-down'}。

键盘绑定

• Escape - 关闭下拉列表。
• Enter - 打开下拉列表并选中项目。
• Arrow Up - 将选择项向上移动。
• Arrow Down - 将选择项向下移动。
• Tab - 默认行为。