spring MVCを使用して検索可能なマルチ選択jqueryに動的データを追加

Question

このwebsiteからJqueryスクリプトを使用しています。春

コントローラー：

@RequestMapping(value="/method2/submit",method = RequestMethod.POST) 
    public String method3(ModelMap model, @ModelAttribute("data") Data data) { 
     model.addAttribute("data",new Data()); 
     ArrayList<String> array = new ArrayList<String>(); 
     array.add("Variable 1-Definition 1"); 
     array.add("variable 2 - Definition 2"); 
     array.add("variable 3-Definition 3"); 
     model.addAttribute("variableList", array); 
     System.out.print(array); 
     return VIEWS_LOCATION +"/secondPage"; 
    } 

• JSPページ：

<script> 
 
var abc = $('.demo').dropdown({ 
 
\t multipleMode : 'label', 
 
\t 
 
}); 
 
console.log("doc load"+abc); 
 

 
</script>

<div class="demo" id="dropdown1"> 
 
<form:select style="display: none" name="" id="values" path="name" multiple="true"> 
 
\t <form:option value="variable11" selected="true">variable1</form:option> 
 
\t <form:option value="variable2" >variable2</form:option> 
 
\t <form:option value="variable3" >variable3</form:option> 
 
\t <form:options items="${variableList}" /> \t \t \t 
 
</form:select> 
 
</div>

ウェブページが下に添付されています。選択したオプションの 一覧は

As you can see Variable1-definition1 is a dynamic value, which when clicked cannot be seen in the search box, but it is already selected.

動的なデータをファイルから読み取ることがある500件のエントリー件まで含むことができ、検索ボックスに表示されます。表現目的のために3つの変数が追加されています。動的データをドロップダウンに追加してください。ありがとう！

Answer 1

私は答えを見つけました！

以前のアプローチの問題は、JSが選択された正確な要素を見つけることができなかったことです（選択された要素のCSSをどのように変更でき、検索結果がうまく機能しているかわかりません）。

私はコードにいくつかの変更を加えましたが、現在はうまくいきます。

コントローラ：配列を送信する代わりに、インデックス作成を容易にするハッシュマップを渡しています。

@RequestMapping(value="/method2/submit",method = RequestMethod.POST) 
    public String method3(ModelMap model, @ModelAttribute("data") Data data) { 
     model.addAttribute("name",data.getName()); 
     model.addAttribute("data",new Data()); 
     HashMap<String,String> map = new HashMap<String,String>(); 
     map.put("1","Variable 1-Definition 1"); 
     map.put("2","variable 2 - Definition 2"); 
     map.put("3","variable 3-Definition 3"); 
     model.addAttribute("variableList", map); 
     System.out.println(map); 
     return VIEWS_LOCATION +"/secondPage"; 
    } 

<c:forEach var="item" items="${variableList}"> 
 
    <option value="${item.key}">${item.value}</option> 
 
</c:forEach>

また、JSP値でJSドロップダウンから選択された正確な要素を識別することを可能にするユニークな番号として渡されます。 output

Answer 2

次のコードを試してみてください。これはうまくいくはずです。

<form:select name="" id="values" path="name" multiple="true" items="${variableList}" />