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

select2 - limiting selection of one list based on value of another

本文关键字：列表 选择 一个 -根 另一个 Select2      更新时间：2023-09-26

如何在select2 (http://ivaynberg.github.io/select2/)中执行此操作

http://jsfiddle.net/Q6h5s/

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 ?

经过全面测试后，我意识到前面的示例在过滤方面是破坏性的。它只允许一次过滤，然后你的选择就没有了。我花了几分钟来解决这个问题。

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/

相关文章：