CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
len
len

Reputation: 404

Chosen jquery plugin - Get the selected text/ label (not value) of multiple selection

I have a chosen multi-select box as below

No matter how many items are selected, I want to get only the current (single) selected label.
I found that params.selected can get the selected value, but what I need is the selected label.

I also cannot use $("#purposes option:selected").text() because it get multiple selected labels,

$("#purposes").chosen().on("change", function(event, params) {
  console.log(params.selected); //this works for value only
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>


<select class="chosen-select" id="purposes" multiple data-placeholder="Purposes">
  <option value="1">Massaging</option>
  <option value="2">Downloading</option>
  <option value="3">Research</option>
  <option value="4">Travel arrangements</option>
  <option value="8">Banking</option>
  <option value="9">OTHERS</option>
</select>

Upvotes: 0

Views: 717

Answers (1)

hgb123
hgb123

Reputation: 14891

You could find the option with the selected value and get its label by .text()

$(this).find(`option[value=${params.selected}]`).text()


$("#purposes").chosen().on("change", function(event, params) {
  console.log($(this).find(`option[value=${params.selected}]`).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<select class="chosen-select" id="purposes" multiple data-placeholder="Purposes">
  <option value="1">Massaging</option>
  <option value="2">Downloading</option>
  <option value="3">Research</option>
  <option value="4">Travel arrangements</option>
  <option value="8">Banking</option>
  <option value="9">OTHERS</option>
</select>

Upvotes: 4

Related Questions