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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.