Question

我如何在select2（http://ivaynberg.github.io/select2/）

中做这个小提琴

HTML：

<select id="sel1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>

<select id="sel2">
<option data-val="1">Banana</option>
<option data-val="1">Apple</option>
<option data-val="1">Orange</option>
<option data-val="2">Wolf</option>
<option data-val="2">Fox</option>
<option data-val="2">Bear</option>
<option data-val="3">Eagle</option>
<option data-val="3">Hawk</option>
<option data-val="4">BWM<option>
</select>

JS：

$("#sel1").change(function() { 
if($(this).data('options') == undefined){
    $(this).data('options',$('#sel2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[data-val=' + id + ']');
$('#sel2').html(options);
});

是否可以使用内置功能，或者我需要挂钩

另外，是否可以在选择sel2后选择正确的sel1？

Answer 1

经过彻底测试后，我意识到我之前的例子在过滤方面具有破坏性。它只允许一次性过滤，然后您的选项消失了。我花了几分钟来解决这个问题。

HTML：

<select id="sel1">
    <option value="all">ALL</option>
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select id="sel2">
    <option data-val="1">Banana</option>
    <option data-val="1">Apple</option>
    <option data-val="1">Orange</option>
    <option data-val="2">Wolf</option>
    <option data-val="2">Fox</option>
    <option data-val="2">Bear</option>
    <option data-val="3">Eagle</option>
    <option data-val="3">Hawk</option>
    <option data-val="4">BMW</option>
</select>

<div class="cloned" style="margin-top: 2em;">
    <p>The data object in cache.</p>    
</div>

JavaScript：

var select = $('#sel2'),
    cache = $('#sel2').clone();
$('.cloned').append(cache);
$("#sel1").change(function() { 
    var id = $(this).val(),
        options = [];
    select.empty();
    cache.find('option').each(function () {
        if (id === 'all') {
            select.append($(this).clone());
        } else if ($(this).data('val') == id) {
            select.append($(this).clone());
        }
    });
});

这是你小提琴的工作叉：http://jsfiddle.net/harveyramer/SY47J/

select2 - 根据另一个列表的值限制选择一个列表

1 个答案: