有人知道是否可以将元素类转移到jquery select2下拉项目?
<select>
<option class="group-1"></option>
<option class="group-1"></option>
<option class="group-2"></option>
<option class="group-2"></option>
</select>
我正在尝试根据用户从另一个下拉列表中选择的值来构建动态列表,因此如果用户选择“组1”,那么我希望仅显示具有类“group-1”的项目。我希望能够做$('ul.select2 li.group-2').hide()
之类的事情。
编辑:为了解决这个问题我已经开发的答案,我将这个问题分成2个问题,
答案 0 :(得分:1)
我设法通过使用select2 plugin,
的模板功能来解决问题<script type="text/javascript">
(function( $ ) {
'use strict';
var opportunities = $('select#opportunities').select2({
dropdownParent: $('#select-opportunity'),
templateResult: formatItem
});
function formatItem (state) {
if (!state.id) { return state.text; }
var $state = $(
'<span class="opportunity-item ' + state.element.className + '">' + state.text + '</span>'
);
return $state;
}
})( jQuery );
</script>
注意:这不允许您操作select2下拉列表,因为class属性仅转移到项目的内部自定义<span>
元素,而不是实际的<li>
元素。下拉列表选择2列表。但是,进一步设置下拉列表的样式非常有用,例如,
<style>
.opportunity-item.group-1::after{
content: '';
display: inline-block;
margin-left:5px;
width: 10px;
height: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: green;
}
.opportunity-item.group-2::after{
content: '';
display: inline-block;
margin-left:5px;
width: 10px;
height: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: blue;
}
</style>
导致,