Using Semantic UI for generating single dropdowns, and using the same data (select options) for multiple dropdowns (user can select in any of dropdowns), but only want the user to be able to select a value (option) once.
Unfortunately the only method I have found to do this is with some jQuery hacks to set a disabled class on the menu item (to prevent them from selecting).
Is there any easier or built in method that can be used to do this, or does anybody have any suggestions or recommendations on best practices to do this?
Demo: https://jsfiddle.net/tripflex/qaf7x4nr/
$(document).ready(function(){
// Dummy values
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, // Use dummy values to generate dropdown items
onChange: function( 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' );
}
});
}
});
}
});.ui.form {
padding: 1em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<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>