淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery Combobox 多选是一种非常实用的插件,它可以让你在需要多选的时候轻松地实现这个功能。下面我们来看一下如何使用这个插件。

首先,你需要引入 jQuery,以及 jQuery UI 的核心和 Combobox 插件的 JavaScript 和 CSS 文件。接着,你需要在 HTML 中添加一个 input 元素,以及一个空的 div 元素,这个 div 元素会在后面用来显示选择的内容。

<input id="myInput" type="text" />
<div id="selectedValues"></div>

接下来,我们来初始化 Combobox 多选插件。你需要给 input 元素调用 combobox 方法,同时传入一些参数,如下:

$("#myInput").combobox({
multiple: true, // 允许多选
source: ["Apple", "Banana", "Cherry", "Durian", "Grape", "Kiwi", "Lemon", "Mango", "Orange", "Pear", "Pineapple", "Strawberry", "Watermelon"], // 可供选择的选项
select: function(event, ui){
// 选项被选中时的回调函数
var selectedValues = $("#selectedValues");
selectedValues.append("<span>" + ui.item.value + "</span>")
},
remove: function(event, ui){
// 选项被移除时的回调函数
var selectedValues = $("#selectedValues");
selectedValues.find("span:contains(" + ui.item.value + ")").remove();
}
});

在这个示例中,我们利用了 select 和 remove 事件来实现选项被选中和被移除时的回调函数。在回调函数中,我们利用 jQuery 找到选中值对应的 span 元素,并添加或删除这个元素。这样就能实现显示已选中选项的功能了。

最后,你可以使用 CSS 样式来美化你的 Combobox 多选。例如,你可以给选中的选项添加一个背景色,并解决一些样式上的问题(如选项框不能盖住下拉箭头的问题)。

.ui-autocomplete-multiselect .ui-state-active {
background-color: #4CAF50;
color: #fff;
}
.ui-combobox .ui-combobox-button {
z-index: 1;
}

通过这个示例,我们已经学会了如何使用 jQuery Combobox 多选插件。你可以利用它来实现各种需要多选的场景,例如商品分类、标签选择等。