CODEWITHSUNDEEP
jqueryselectpluginsjquery-chosen
Martijn van Turnhout
Martijn van Turnhout

Reputation: 271

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

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

This is the code:

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

This is the Javascript. jQuery library, the latest Chosen plugin and CSS are all properly included ofcourse.

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

This is what I want to accomplish with the script above.

Does anybody know how to accomplish this?

I've put up a JSFiddle here: http://jsfiddle.net/dq97z/3/

Upvotes: 9

Views: 30934

Answers (4)

Stefannno
Stefannno

Reputation: 21

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>

Upvotes: 2

David Murdoch
David Murdoch

Reputation: 89402

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");
});

Upvotes: 24

gdoron
gdoron

Reputation: 150303

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>

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

Since you are modifying the option which is selected in the first dropdown the previous options which were disabled are not enabled again.

You need to first enable all the options and then disable only the selected option. Try this

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

Upvotes: 0

Related Questions