Adding select options at runtime

Get help with using Metro 4 components
Post Reply
shnar
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.

Thanks,

-BKN

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

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


shnar
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?

-shnar

Post Reply