将事件绑定到选定的选择答案

【问题标题】：Binding event to chosen select将事件绑定到选定的选择
【发布时间】：2012-07-02 01:18:08
【问题描述】：

我有这个选择框的代码，它由 Chosen 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”，即没有价值。

【问题讨论】：

为什么+ $(this).text() 有加号？你也提醒文本但使用 val.
@JosephMarikle - 我认为这也是一个问题，但显然这只是将004“转换”为4。 Tats_innit 的演示表明它有效。

标签： jquery onchange jquery-chosen jquery-events

【解决方案1】：

代码：

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

演示：

~~工作演示：http://jsfiddle.net/MM7wh/~~

编辑（2015 年 7 月 6 日）

cdns 已更改。

工作演示：http://jsfiddle.net/uk82dm5L/

请使用$(this).val() 而不是.text()。

【讨论】：

让它工作，虽然我的值改为 int，因为文本似乎不符合
@Paul'Whippet'McGuane 很高兴它有帮助:)
再进一步，我将如何检查加载页面时预选的值？我使用$('select.chzn-done option:selected').val(); 吗？还是有更好更简单的方法
@Paul'Whippet'McGuane 你是对的，没错！ api.jquery.com/val 示例代码： $('select.foo option:selected').val();
$('select.foo').chosen().val();加载页面时也会获取选中的值。

【解决方案2】：

我个人更喜欢用这个：

$(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);
    }
});

【讨论】：