jQuery được chọn: cách chọn 1 giá trị tùy chọn và xóa cùng một giá trị trong một menu chọn khác?

Question

Tôi đã đặt 2 phần tử cạnh nhau. Cả hai đều sử dụng plugin jQuery Chosen.

Đây là mã:

<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> 

Đây là Javascript. Thư viện jQuery, plugin Chosen và CSS mới nhất đều được cung cấp đúng cách.

<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> 

Đây là những gì tôi muốn thực hiện với tập lệnh ở trên.

• Có hai yếu tố được chọn có cùng giá trị. Khi giá trị "1" đã được chọn trong phần tử 1 ví dụ, tôi muốn vô hiệu hóa nó trong phần tử 2.
• Tuy nhiên. sau khi tôi bỏ chọn giá trị "1" trong phần tử 1, đó là vẫn còn bị vô hiệu hóa trong phần tử 2. Đó không phải là điều tôi muốn. Giá trị khác sẽ có sẵn trở lại sau khi bỏ chọn giá trị trong phần tử thứ nhất.

Có ai biết cách thực hiện điều này không?

EDIT

bây giờ tôi đã đưa ra một JSFiddle đúng đây: http://jsfiddle.net/dq97z/3/. Bất kì sự trợ giúp nào đều được đánh giá cao!

Answer 1

Something như thế này nên làm điều đó:

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

Vì bạn đang sửa đổi tùy chọn được chọn trong danh sách thả xuống đầu tiên, các tùy chọn trước đó đã bị tắt sẽ không được kích hoạt lại.

Trước tiên, bạn cần bật tất cả các tùy chọn và sau đó chỉ tắt tùy chọn đã chọn. Hãy thử điều này

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

Answer 3

Bạn đặt người khuyết tật thay đổi mỗi ngày, ofcourse nó sẽ không làm việc ...

Trong đoạn mã này để thay đổi các thuộc tính tàn tật dựa trên giá trị trước đó;

<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

Tôi đang cố gắng sử dụng mã này mà không có sự lựa chọn nhiều như vậy cho mỗi chỉ chọn một lựa chọn có thể được lựa chọn. Tôi muốn sử dụng allow_single_deselect: đúng mã để xóa một tùy chọn nếu được chọn trong hộp chọn nhưng tôi không thể làm cho nó hoạt động. Tôi đã tắt tùy chọn tìm kiếm vì tôi không cần nó trên trang này.

<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>