我有一个下拉选择的可选’机会'(下面示例中的id =“机会”),我使用
select2 jquery plugin进行了增强,并希望动态过滤此列表,以减少使用第二个选择呈现给用户的可能选项下拉列表(在下面的示例中为id =“group-select”),
<label>
Select an opportunity<br>
<select id="opportunities" style="width:300px;" multiple="multiple" name="selected-opps" value="">
<optgroup label="Class A">
<option class="group-1" value="1a">Opportunity 1a</option>
<option class="group-2" value="2a">Opportunity 2a</option>
</optgroup>
<optgroup label="Class B">
<option class="group-1" value="1b">Opportunity 1b</option>
<option class="group-2" value="2b">Opportunity 2b</option>
</optgroup>
<optgroup label="Class C">
<option class="group-1" value="1c">Opportunity 1c</option>
<option class="group-2" value="2c">Opportunity 2c</option>
</optgroup>
</select>
</label>
<select id="group-select">
<option value="">Select a group</option>
<option value="group-1">group 1</option>
<option value="group-2">group 2</option>
</select>
</div>
<div id="select-opportunity"></div>
<script type="text/javascript">
(function( $) {
'use strict';
var opportunities = $('select#opportunities').select2({
dropdownParent: $('#select-opportunity')
});
})( jQuery );
</script>
我希望能够在第二个选择中进行选择,比如说’组1′,并希望select2列表只包含’group-1’项目,因为第一个选择下拉列表中的选项包含了grouo-1类属性.
解决方法
我设法使用select2插件提供的2个可选功能来解决这个问题,即能够使用
templating functionality控制项目的构建和显示方式,并使用插件中公开的
programmatic control.我替换了问题中示例下面附带的javascript,
<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; }
//change the id of our select2 items
state._resultId = state._resultId+'-'+state.element.className;
var $state = $(
'<span class="opportunity-item ' + state.element.className + '">' + state.text + '</span>'
);
return $state;
}
$('select#group-select').change( function() {
//hide the unwanted options
var group = $('select#group-select option:selected').val();
//clear the styling element
$('style#select2-style').empty();
if(group){
//if a group is selected we need to hide all the others
$('select#group-select option').not(':selected').each(function(){
group = $(this).val();
if(group){
$('style#select2-style').append(
'li[id$="'+group+'"]{display:none;}'
);
}
});
}
//force the select2 to referesh by opening and closing it again
opportunities.select2('open');
opportunities.select2('close');
});
})( jQuery );
</script>
<style id="select2-style"></style>
我还添加了一个空的< style>底部的元素,我动态创建隐藏不需要的项目所需的规则.
逻辑
上面的代码创建了模板函数formatItem,select2插件将使用它来格式化项目.项状态对象被传递给包含每个项的唯一ID的函数.
通过附加相应选项元素的类来修改此id.
当在第二个下拉选择(#group-select)中选择一个组选项时,会创建一组样式并将其附加到底部< style>元素隐藏其id属性以要隐藏的类名结尾的所有元素,例如,如果一个seleced group-1,代码将创建一个样式来隐藏group-2项,
li[id$="group-2"] {
display:none;
}
然而,为了实现这一点,我们需要强制select2下拉列表刷新以获取新的样式,我发现这项工作的唯一方法是使用插件的程序控制来“打开”并立即“关闭”select2下拉列表.
