jQuery Chained：如何解开链接的下拉列表？

Question

我用过这个插件：https://github.com/tuupola/jquery_chained

我已经链接了下拉列表，并且在某些情况下，我想根据事件取消链接并重新绑定链接。

这里有一些例子：

<select id="first">
<option value="a">A</option>
<option value="b">B</option>
</select>

<select id="second">
<option value="c" class="a">C</option>
<option value="d" class="a">D</option>
<option value="e" class="b">E</option>
</select>

<input type="checkbox" value="1" id="unchain" />

Javascript 将是：

$('#second').chained('#first');
$('#unchain').change(function(){
  if ($(this).prop('checked'))
  {
    // how to unchain the chained dropdown?
  }
});

已尝试$('#second').unbind('chained');，但没有成功。

有什么建议吗？

Answer 1

Chained 插件过滤来自#second select 的所有不匹配选项，因此当您“取消链接”（从更改事件中取消绑定）时，#second select 将有一些选项被切断（即永远丢失）。

只有在取消链接后您将使用全套选项重新初始化 #second select 时，它才能工作。所以应该这样做：

$(function () {
    // remember #second select
    var secondCopy = $('#second').clone();
    $('#second').chained('#first');
    $('#unchain').change(function(){
        if ($(this).prop('checked')){
            $('#second').chained('#first');
        }
        else{
            $('#first').unbind('change');
            // remember selected value:
            var value = $('#second').val();
            // populate #second select with remembered options
            $('#second').html(secondCopy.html());
            // set saved value
            $('#second').val(value);
        }
    });
});

Demo.