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 >
<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 ??
CodePudding user response:
1. Better go with Fomantic-UI
First of all, I strongly suggest you to switch to Fomantic-UI
, that's a fork of Semantic-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
and text
accept also HTML markup, as you can see in the snippet below.
const menuItems = [{
value: 'john',
name: '<span >- John -</span>',
text: 'John selected'
},
{
value: 'mary',
name: '- Mary -',
text: 'Mary selected'
},
{
value: 'james',
name: '- James -',
text: '<span >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/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<div >
<label> Main Category </label>
<select name="home_main_category" id="home_main_cat_dropdown_id">
<option value=""> Category </option>
</select>
</div>