Paul 'Whippet' McGuane Paul 'Whippet' McGuane - 11 months ago 98
jQuery Question

Binding event to chosen select

I have this code for a select box which is being displayed by the Chosen jQuery plugin. What I am trying to achieve is to get the value from the current item that has been selected:

<select id="schedule_event" name="schedule[event]" style="display: none; " class="chzn-done"><option value="Game" selected="selected">Game</option>
<option value="Event">Event</option>
<option value="Training">Training</option>
<div id="schedule_event_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 854px; ">
<a href="javascript:void(0)" class="chzn-single chzn-single-with-drop" tabindex="-1">
<div class="chzn-drop" style="width: 849px; top: 27px; left: 0px; ">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 814px; " tabindex="0">
<ul class="chzn-results">
<li id="schedule_event_chzn_o_0" class="active-result result-selected highlighted" style="">Game</li>
<li id="schedule_event_chzn_o_1" class="active-result" style="">Event</li>
<li id="schedule_event_chzn_o_2" class="active-result" style="">Training</li>

The Javascript I'm using at the moment to find the current value is:

$("#schedule_event").chosen().change( function() {
alert(+ $(this).text());
$('#' + $(this).val()).show();

However I keep getting a 'NaN', ie no value. Any assistance would be great.


Answer Source

working demo

Edit 6th July 2015 => cdns are changed now.

Please use $(this).val() instead of .text()

Rest feel free to play around with demo,

Hope it helps, lemme know if I missed anything.


$(".chzn-select").chosen().change(function() {
    //$('#' + $(this).val()).show();