Adding select options at runtime

Get help with using Metro 4 components
Post Reply
Posts: 11
Joined: Mon Nov 26, 2018 12:52 pm
Status: Offline

Adding select options at runtime

Post by shnar » Fri Jun 14, 2019 4:09 am

I have a normal <select> dropdown list that I am populating at runtime. I'm trying to switch out to the MetroUI's version, which I was hoping would be as simple as adding 'data-role="select"', unfortunately I'm having some issues.

Issue 1, hidden at first, displayed if more than one value.
My <select> tag has this style attribute: style="display:none;". The javascript on load goes and fetches a string array to populate the list with. If there is more than one result, the first thing it does is show the <select> element, i.e. $("#MySelect").show();. Once I added in the data-role="select", the entire select box is gone in the resulting HTML. It's not just hidden, it's completely removed from the source. Is there a way to have a hidden MetroUI Select element?

Issue 2, populating the data
I was reading in the help to use the data function (i.e. $("#MySelect").data('select')) but I can't figure out how to either append one to the end of the list, or just add an array of string to the list. I tried doing something like $("#MySelect").data('select').append() but that said there was no such function. I tried .data-append(), same thing. I tried .val(myArrayOfStrings) and that didn't seem to add anything to the list either. I need maybe a code sample on how to add one item to the select list, as well as an array of strings to the select list.



User avatar
Site Admin
Posts: 209
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jun 19, 2019 2:25 pm

Posts: 11
Joined: Mon Nov 26, 2018 12:52 pm
Status: Offline

Post by shnar » Thu Jun 20, 2019 7:09 pm

Thanks for the response, but it didn't quite answer my two questions:

1) I have the <SELECT> component as "display:hidden". Because of this, it looks like it's not getting updated to be a MetroUI select control. I need it hidden at first, then displayed based on the Ajax response. How do I hide then show the select list?

2) Is there a way to add ONE item to an existing list? The example you provided just added a whole list. Is there a way to just add one item?


Posts: 1
Joined: Fri Jun 28, 2019 8:45 pm
Status: Offline

Post by satbho458 » Sun Jun 30, 2019 9:52 am

This may be helpful
<label>Select State</label>
<select data-role="select" data-validate="required not=-1" id="states" name="states">
<option value="-1" class="d-none"></option>
<span class="invalid_feedback">You must select an option!</span>

<select id="select1" data-role="select" class="mt-4">
<option value="-1"></option>

<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/metro.min.js"></script>

//on change state
var stteid = $(this).val();
url: 'data/select.php',
data: 'statecode='+stteid,
method: 'POST',
beforeSend: function(){
success: function(response) {
var select = $("#select1").data("select");;
complete: function(){

Post Reply