所以我有一個使用 JSP 和 Servlet 創建的表單，我有一個下拉串列，我試圖通過使用語意 UI 行為 [在此處輸入鏈接描述] [1]（設定選單（值））。
有人可以幫忙嗎？，任何幫助表示感謝提前感謝。
我將添加我在下面嘗試過的代碼。
這是我的下拉選單，我使用的是 element 而不是 .
<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>
請任何人都可以提供一些如何實作這種行為的示例代碼嗎？
uj5u.com熱心網友回復：
1. 最好使用 Fomantic-UI
首先，我強烈建議您切換到Fomantic-UI，這是 的一個分支Semantic-UI，但它正在積極維護和更新，而 Semantic-UI 有點被遺棄（Semantic-UI 上次更新是在 2018 年）。
Fomantic-UI 具有與 Semantic-UI 相同的組件和功能，但 Fomantic-UI 為多個組件/模塊添加了新的有用的特性/設定，并且還創建了全新的（如toasts或calendar）。
2.下拉選單
也就是說，您可以通過這種方式設定/重新創建下拉選單：
$(dropdownElement)
.dropdown('setup menu', { values: some_array });
形狀如下some_array的陣列（你不說？！？：D ）在哪里：
some_array = [
{value: '', name: '', text: ''},
{value: '', name: '', text: ''},
...
{value: '', name: '', text: ''},
]
value<option>是將存盤在下拉串列的隱藏<input>欄位中的值（對于給定的）name<option>是打開下拉串列時顯示在選項串列中的文本（給定的）。text<option>是當您選擇該選項時將在下拉串列中顯示的（給定的）文本
兩者都name接受textHTML 標記，如下面的代碼片段所示。
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 class="required field">
<label> Main Category </label>
<select name="home_main_category" id="home_main_cat_dropdown_id">
<option value=""> Category </option>
</select>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/471492.html