jQuery Chosen: как выбрать 1 значение параметра и удалить его в другом меню выбора?

Question

Я положил 2 элемента рядом друг с другом. Оба они используют плагин jQuery Chosen.

Это код:

<div class="wrapper">
  <select data-placeholder="Number row 1" style="width:350px;" multiple class="chzn-select">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>

  <select data-placeholder="Number row 2" style="width:350px;" multiple class="chzn-select">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

Это Javascript. Библиотека jQuery, последний плагин Chosen и CSS все правильно включены в курс.

<script>
$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
  var selectedValue = $(this).find('option:selected').val();
  $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled');
});
</script>

Это то, чего я хочу достичь с помощью приведенного выше сценария.

• Есть два элемента select с одинаковыми значениями. Например, когда в элементе 1 выбрано значение «1», я хочу отключить его в элементе 2.
• Тем не менее. после того, как я отменил выбор значения "1" в элементе 1, все еще отключен в элементе 2. Это не то, что я хочу. Другое значение должно быть снова доступно после отмены выбора значения в 1-м элементе.

Кто-нибудь знает, как этого добиться?

EDIT

Я сейчас установил JSFiddle прямо здесь: http://jsfiddle.net/dq97z/3/. Любая помощь будет высоко ценится!

Answer 1

Что-то вроде этого должно сделать это:

http://jsfiddle.net/musicisair/dq97z/10/

// cache selects for use later
var selects = $('.chzn-select');

// whenever the selection changes, either disable or enable the 
// option in the other selects
selects.chosen().change(function() {
    var selected = [];

    // add all selected options to the array in the first loop
    selects.find("option").each(function() {
        if (this.selected) {
            selected[this.value] = this;
        }
    })

    // then either disabled or enable them in the second loop:
    .each(function() {

        // if the current option is already selected in another select disable it.
        // otherwise, enable it.
        this.disabled = selected[this.value] && selected[this.value] !== this;
    });

    // trigger the change in the "chosen" selects
    selects.trigger("liszt:updated");
});

Answer 2

Я пытаюсь использовать этот код без множественного выбора, поэтому для каждого выбора можно выбрать только один вариант. Я хочу использовать код allow_single_deselect: true, чтобы удалить опцию, если она выбрана в поле выбора, но я не могу заставить ее работать. Я отключил параметр поиска, потому что он мне не нужен на этой странице.

<script>//<![CDATA[ 
$(function(){  
$('.chzn-select').chosen({disable_search_threshold: 10}) .change(
function() {
var selectedValue = $(this).find('option:selected').val();
$(this).parent().parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled');
$('.chzn-select').trigger("liszt:updated");
});

});//]]></script>       

Answer 3

Вы устанавливаете отключенное при каждом изменении, конечно, оно не будет работать ...

В этом коде я изменяю атрибут отключенного на основе предыдущего значения;

<script>
$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
  var selectedValue = $(this).find('option:selected').val();
  $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)')
        .prop("disabled", function( i, val ) {
              return !val;
            });
});
</script>

Answer 4

Поскольку вы изменяете параметр, выбранный в первом раскрывающемся списке, предыдущие параметры, которые были отключены, больше не включаются.

Сначала необходимо включить все параметры, а затем отключить только выбранный параметр. Попробуйте это

$('.chzn-select').trigger("liszt:updated");
$('.chzn-select').chosen().change( function() {
    var selectedValue = $(this).find('option:selected').val();
    var $options = $(this).parent().find('option').attr('disabled', false);
    $options.filter('option[value="'+ selectedValue +'"]:not(:selected)')
    .attr('disabled', true);
});