Search code examples
jqueryjspservletsjstlsemantic-ui

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

Solution
  • 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> field
    • name 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 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/[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 class="required field">
  <label> Main Category </label>
  <select name="home_main_category" id="home_main_cat_dropdown_id">
    <option value=""> Category </option>
  </select>
</div>