I'm trying to change values of semantic drodown by using setup menu(values) method, but it fails when I use useLabels: false.
Ex. without useLabels: false
$(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('setup menu', { values: [{ name: 'Alaska', value: 'AK' }, { name: 'Arizona', value: 'AZ' }, { name: 'Arkansas', value: 'AR' }, { name: 'California', value: 'CA' } ] }); }) })<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>Ex. with useLabels: false
The problem is, that is shows that it selects value but actually does not.
$(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('setup menu', { values: [{ name: 'Alaska', value: 'AK' }, { name: 'Arizona', value: 'AZ' }, { name: 'Arkansas', value: 'AR' }, { name: 'California', value: 'CA' } ] }); }) })<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>Or maybe problem is something else, but whatever it is I'm not getting multiple values (Array of chosen values).
Any help will be appreciated.
Note: I'm using .net sever controls for select, therefore I cannot use div structured dropdown
Ex.
@Html.DropDownList("", new { @id = "ddPage", @class="ui fluid dropdown search", @multiple="" }) 2 Answers
Answers 1
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>Answers 2
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>
0 comments:
Post a Comment