Semantic UI Dropdown 'setup menu' fails
Check this snippet, i tried various ways, especially the documented methods, but nothing seemed to work... but if you try a more javascript/jQuery based approach, you can destroy the dropdown, reconstruct the select element with either jQuery or plain javascript and then reinitialize the dropdown, i also added a set placeholder textcall, i tried inserting an empty option but didn't made the trick, so i used that function instead...
$(document).ready(function() {
$('.ui.dropdown').dropdown({
//useLabels: false,
onChange: function(value, text, $selectedItem) {
console.clear();
console.log(value);
}
});
$('.ui.button').on('click', function() {
$('#select').dropdown("clear"); // clear dropdown
$('#select').html(""); // Empty the select
$('#select').dropdown("destroy"); // Destroy dropdown
$('#select').dropdown("set placeholder text", 'New Placeholder'); // Set new placeholder
var selectValues = { "AK": "Alaska", "AZ": "Arizona", "CA": "California" }; // define new values
// populate select
$.each(selectValues, function(key, value) {
$('#select')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
// call your original dropdown definition again
$('.ui.dropdown').dropdown({
//useLabels: false,
onChange: function(value, text, $selectedItem) {
console.clear();
console.log(value);
}
});
console.clear(); // CLEAR CONSOLE
console.log($('#select').dropdown('get value')); // GET CURRENT SELECTED VALUE WHICH SHOULD BE NULL
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<select name="gender" class="ui dropdown" multiple id="select">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<p></p>
<button class="ui button" type="button">Reset values</button>3 things:
- The CDN seems to be outdated. I found the latest while looking at this GitHub issue and clicking on the fiddle right at the end.
- In the latest version, you no longer need to use
'setup menu'to update the select. - It had nothing to do with
useLabels. The problem that you're facing seems solvable only when I created a dropdown in the format shown in the Examples.
$(document).ready(function() {
$('.ui.dropdown').dropdown({
//useLabels: false,
onChange: function(value, text, $selectedItem) {
console.clear();
console.log(value);
}
});
$('.ui.button').on('click', function() {
$('#select').dropdown({
useLabels : false,
onChange: function(value, text, $selectedItem) {
console.clear();
console.log(value);
},
values: [{
name: 'Alaska',
value: 'AK'
},
{
name: 'Arizona',
value: 'AZ'
},
{
name: 'Arkansas',
value: 'AR'
},
{
name: 'California',
value: 'CA'
}
]
});
})
})<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<button class="ui button" type="button">Reset values</button>
<div id="select" class="ui fluid multiple special selection dropdown">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
<div class="item" data-value="ad"><i class="af flag"></i>ad</div>
<div class="item" data-value="as"><i class="af flag"></i>as</div>
</div>
</div>