JSFiddle - React, Tailwind, and code Playground

by davidmurdoch

HTML

<script type="text/javascript" src="http://www.mastepinnelaand.nl/assets/js/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mastepinnelaand.nl/assets/js/chosen/chosen.css">

<div class="main_wrapper">
    <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>
</div>

JavaScript

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