How to use setup menu(values) behavior of Semantic ui to populate a dropdown with values from database
So I have a form created by using JSP and Servlet in that form i have a dropdown which i am trying to populate with the values which are in my database by using semantic UI behavior [enter link description here][1] (setup menu(values)).
Can someone please help regarding this ?? , Any help is appreciated thanks in advance.
I'll add the code which i have tried below.
This is my Dropdown and i am using element instead of .
<div class="required field">
<label> Main Category </label>
<select name = "home_main_category" id = "home_main_cat_dropdown_id" >
<option value = "" > Category </option>
</select>
</div>
this is how i am trying to use semantic behavior setup menu(values) but i am not sure what to give in place of name text and value.
<script type="text/javascript">
$("#home_main_cat_dropdown_id").dropdown('setup menu',{ values: [{ value: '${category.main_category}' , name: 'main_category' }] });
</script>
<script type="text/javascript">
$("#home_main_cat_dropdown_id").dropdown('setup menu', { values: '${category.main_category}' } );
</script>
<script type="text/javascript">
$("#home_main_cat_dropdown_id").dropdown('setup menu(values)', ['${category.main_category}'] );
</script>
please can anyone give some sample code of how to implement this behavior ??
1 answer
-
answered 2022-05-04 13:53
cheesyMan
1. Better go with Fomantic-UI
First of all, I strongly suggest you to switch to
Fomantic-UI
, that's a fork ofSemantic-UI
, but it's actively mantained and updated, while Semantic-UI is kind of abandoned (Semantic-UI last update was in 2018).Fomantic-UI has the same components and functionalities of Semantic-UI, but Fomantic-UI added new and useful features/settings to several components/modules and also created brand new ones (like toasts or calendar).
2. Dropdown menu
That said, you can setup/re-create a dropdown's menu in this way:
$(dropdownElement) .dropdown('setup menu', { values: some_array });
where
some_array
is an array (You don't say?!? :D ) shaped like this:some_array = [ {value: '', name: '', text: ''}, {value: '', name: '', text: ''}, ... {value: '', name: '', text: ''}, ]
value
is the value (for the given<option>
) that will be stored in dropdown's hidden<input>
fieldname
is the text (of the given<option>
) that is shown in the list of options when you open the dropdown.text
is the text (of the given<option>
) that will be shown in the dropdown when you select that option
Both
name
andtext
accept also HTML markup, as you can see in the snippet below.const menuItems = [{ value: 'john', name: '<span class="name red">- John -</span>', text: 'John selected' }, { value: 'mary', name: '- Mary -', text: 'Mary selected' }, { value: 'james', name: '- James -', text: '<span class="text green">James!!!</span>' }, ] $("#home_main_cat_dropdown_id").dropdown('setup menu', { values: menuItems });
span.name.red { background: red; padding: 10px; color: #cecece; } span.text.green { background: lightgreen; padding: 2px 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css"> <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script> <div class="required field"> <label> Main Category </label> <select name="home_main_category" id="home_main_cat_dropdown_id"> <option value=""> Category </option> </select> </div>
do you know?
how many words do you know