如何使用语义 ui 的设置菜单（值）行为来使用数据库中的值填充下拉列表

Question

所以我有一个使用 JSP 创建的表单和该表单中的 Servlet 我有一个下拉列表，我试图通过使用语义 UI 行为来填充数据库中的值[在此处输入 link 描述][1]（设置菜单（值））。

有人可以帮忙吗？？ , 提前感谢任何帮助。

我将在下面添加我尝试过的代码。

这是我的下拉菜单，我使用的是元素而不是 .

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

这就是我尝试使用语义行为设置菜单（值）的方式，但我不确定用什么来代替名称文本和值。


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

谁能提供一些示例代码来说明如何实现此行为？？

Answer 1

1。最好选择 Fomantic-UI

首先，我强烈建议你改用Fomantic-UI，那是Semantic-UI的一个分支，但是主动维护 并更新，而 Semantic-UI 有点被遗弃（Semantic-UI 最后一次更新是在 2018 年）。

Fomantic-UI 具有与 Semantic-UI 相同的组件和功能，但 Fomantic-UI 为几个 components/modules 添加了新的和有用的 features/settings 并且还创建了全新的那些（比如 toasts or calendar）。

2。下拉菜单

也就是说，您可以设置/re-create 下拉菜单：

$(dropdownElement)
   .dropdown('setup menu', { values: some_array });

其中 some_array 是一个数组（你不说？！？:D ）形状如下：

some_array = [
   {value: '', name: '', text: ''},
   {value: '', name: '', text: ''},
   ...
   {value: '', name: '', text: ''},
]

value 是将存储在下拉列表的隐藏 <input> 字段中的值（对于给定的 <option>）
name 是当您打开下拉菜单时选项列表中显示的（给定 <option> 的）文本。
text 是（给定 <option> 的）文本，当您 select 该选项

name 和 text 都接受 HTML 标记，如下面的代码片段所示。

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>

如何使用语义 ui 的设置菜单（值）行为来使用数据库中的值填充下拉列表

How to use setup menu(values) behavior of Semantic ui to populate a dropdown with values from database

jquery

jsp

servlets

jstl

semantic-ui

1。最好选择 Fomantic-UI

2。下拉菜单