CODEWITHSUNDEEP
javascriptsemantic-ui
Martin Dimitrov
Martin Dimitrov

Reputation: 4956

Semantic UI: How to cancel the addition of label in multi-select dropdown

I have to check the value that is being selected and in some circumstances, not to allow the addition. I tried this but onAdd seams to fire before the actual addition:

$dependenciesDropdown.dropdown({
    onAdd: function(addedValue, addedText, $addedChoice){
        if(<some special case>){
            $dependenciesDropdown.dropdown('remove selected', addedValue);
        }
    }
});

Any ideas? Thanks.

Upvotes: 0

Views: 1400

Answers (1)

Goran Mottram
Goran Mottram

Reputation: 6304

I experienced the same problem as you've described. Instead, you can overwrite the select action to evaluate your special case and determine which options are allowed before they are added to the UI.

Read more: Specifying select action

Example:

$(function() {
  $('select').dropdown({
    action: function(text, value) {
      if (value != '3') {
        $('select').dropdown('set selected', value);
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />

<select multiple="" class="ui dropdown">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three (disabled)</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Upvotes: 2

Related Questions