发表新帖
发表新帖

jQuery Chosen: how to select 1 option value and remove the same one in another select-menu?

后端 未结
关注
4 1552
渐次进展
渐次进展 2021-02-08 21:14

I\'ve put 2 elements next to eachother. Both of them are using the jQuery Chosen plugin.

This is the code:


  
                        
    

    
提交评论
  •  加载中...
  • 别那么骄傲
    2021-02-08 21:39

    I'm trying to use this code without the multiple choice so for each select only one option can be chosen. I want to use the allow_single_deselect: true code to remove an option if chosen in the select box but I can't get it working. I disabled the search option because I don't need it on this page.

    <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>
    0 讨论(0)
  • 青春惊慌失措
    2021-02-08 21:40

    Something like this should do it:

    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");
});
    0 讨论(0)
  • 栀梦
    2021-02-08 21:51

    You set the disabled on every change, ofcourse it won't work...

    In this code I change the disabled attribute based on the previous value;

    <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>
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题