Semantic UI sandbox

by Myles McNamara

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<form class="ui form">
  <h4 class="ui header">Semantic UI multiple dropdowns, only allow value to be selected once</h4>
  <div class="field">
    <div class="label">Select a value here:</div>
    <div id="dd1" class="ui selection dropdown">
      <input type="hidden" name="group[logic][1][0]" value="john_doe" data-validate="dropdown_input">
      <div class="text"></div>
      <i class="dropdown icon"></i>
    </div>
  </div>
  <div class="field">
    <div class="label">You should not be able to select the value above, in any of these below:</div>
    <div id="dd2" class="ui selection dropdown">
      <input type="hidden" name="group[logic][1][1]" value="john_doe" data-validate="dropdown_input">
      <div class="text"></div>
    </div>
  </div>
  <div class="field">
    <div class="label">Has Value and No Selected Set</div>
    <div id="dd3" class="ui selection dropdown">
      <input type="hidden" name="group[logic][1][2]" value="john_doe" data-validate="dropdown_input">
      <div class="text"></div>
    </div>
  </div>
</form>

CSS

body {
    padding: 1em;
}

JavaScript

window.disabled_vals = [];
window.vals = [
      {
        name: 'John Doe',
        value: 'john_doe'
      },
      {
        name: 'John Smith',
        value: 'john_smith'
      },
      {
        name     : 'Mary Doe',
        value    : 'mary_doe',
      },
      {
        name     : 'Jane Smith',
        value    : 'jane_smith',
      }
    ];

$( '.ui.dropdown' ).dropdown(
	{
		 values: window.vals,
     debug: true,
     //allowAdditions: true,
     onChange: function( selected_value, text, $choice ){
        console.log( 'Changed', selected_value, text, $choice );
        
   			selection_changed( selected_value );
     },
	}
);
$('.ui.form').form();

function selection_changed( selected ){
    
      $form = $('.ui.form');
      
      // I'm using Semantic UI form validation to get all values of existing dropdown inputs,
      // this could also be done with plain jQuery as well, just makes for quicker/easier pull
      // of values
  		var selected_vals = $form.form('get values', 'dropdown_input' );
      
      // Remove disabled class from all menu items
      $( '.ui.dropdown > .menu > .item' ).removeClass( 'disabled' );
      
      // Loop through each selected value and add Disabled class
      $.each( selected_vals, function( index, value ){
      
      		if( value ){
              // Loop through each menu item
              $( '.ui.dropdown > .menu div[data-value="' + value + '"]' ).each( function(){
              
              		// If already has class "selected" we don't want to disable that one
                  if( ! $(this).hasClass('selected') ){
                  		// Add disabled class so user can't select it in other dropdowns
                  		$( this ).addClass( 'disabled' );
                  }
                  
              });
          }
      });
    
}