How can I display option text on the drop down menu differently then selected text in a jsp using select2js


#1

I have the following code snippet and I wanted to select multiple values from the drop-down at once(by ctrl key and mouse click) and also the selected text value(EXR) should be different from the option value(EXR - Exchange Value) in the drop down.

Suppose if drop down shows ${dataset.name}+${dataset.description}(it will display EXR - Exchange Value ) then the selected text should show ${dataset.name}(EXR). Currently it is showing${dataset.name}+${dataset.description}for the dropdown and as well as selected value.

<td style="padding-left: 27px;">Select the interested text:<br>
  <select id="datasets" name="datasets" multiple="multiple" style="width: 189px;">
    <option></option>
    <c:forEach var="entry" varStatus="status" items="${datasetMap}">
      <c:set var="dataset" value="${entry.value}" />
      <c:set var="selected" value="" />
      <c:forEach var="item" items="${selectedDataset}">
        <c:if test="${item eq dataset.id}">
          <c:set var="selected" value="selected" />
        </c:if>
      </c:forEach>
      <option value="${dataset.id},${dataset.name},${dataset.description}" ${selected}>
        <c:out value="${dataset.name}-${dataset.description}" />
      </option>
    </c:forEach>
  </select>
</td>

I have tried to replace

     <option value="${dataset.id},${dataset.name},${dataset.description}" ${selected}>

with

      <option value="${dataset.name}" ${selected}>

But it still showing the the name-description when I select some value from the drop-down list


#2

Take a look at this part of the documentation: https://select2.org/selections#templating