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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum