web-dev-qa-db-ja.com

選択した選択へのイベントのバインド

選択したjQueryプラグインによって表示されている選択ボックス用のこのコードがあります。私が達成しようとしているのは、選択されている現在のアイテムから値を取得することです。

<div>
  <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>
  </select>
  <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">
      <span>Game</span>
      <div></div>
    </a>
    <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">
    </div>
    <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>
    </ul>
  </div>
</div>
</div>

現在の値を見つけるために現在使用しているJavaScriptは次のとおりです。

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

しかし、私は「NaN」、つまり値を取得し続けます。

jqueryonchangejquery-chosenjquery-events
17
Boss Nass

コード：

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

デモ：

作業デモ： http://jsfiddle.net/MM7wh/

編集（2015年7月6日）

cDNが変更されました。

作業デモ： http://jsfiddle.net/uk82dm5L/

$(this).val()の代わりに.text()を使用してください。

33
Tats_innit

個人的に私はこれを使うことを好みます：

$(document).on('change', '#mychosen', function(evt, params) {
    if (params.selected != undefined)
    {
        console.log('selected: ' + params.selected);
    }
    if (params.deselected != undefined)
    {
        console.log('deselected: ' + params.deselected);
    }
});
3
user7051905