jQuery Chained:如何取消链接的下拉列表? [英] jQuery Chained: How to unchain chained dropdown?

问题描述

我使用了此插件: https://github.com/tuupola/jquery_chained

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

I've chained dropdown, and in some event, I want to unchain and rebind chain based on the event.

这里有个例子:

<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将为:

The Javascript will be:

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

尝试过$('#second').unbind('chained');，但是没有用.

有什么建议吗?

推荐答案

链式插件会过滤#second select中所有不匹配的选项，因此，当您取消绑定"(与更改事件取消绑定)时，#second select将有一些选择被切断(即永远失去).

Chained plugin filters all non-matching options from #second select, so when you "unchain" (unbind from change event), the #second select will have some options cut off (i.e. lost forever).

仅当解除链接后要重新初始化带有完整选项集的#second select时，它才起作用.因此，应该执行以下操作:

It can only work if after unchaining you would reinitialize #second select with full set of options. So something like this should be done:

$(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);
        }
    });
});

这篇关于jQuery Chained:如何取消链接的下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！