jquery - jQuery关于“选定的选项”选择

Question

很容易听到 select 的变化：

var redirect = function() {
    return window.location = $(this).val();
};

$('body').on('change', '#nav-select', redirect);

但是如何捕捉已经选择的选项的选择（change对我们来说没有事件）？

试过：

$('body').on('click', '#nav-select option', redirect);

不工作...

编辑：要清楚：

我有一个带有默认选定选项的选择foo。我想抓住这个：

1. 用户点击选择
2. 选择foo已被选中的选项（无更改事件）

Answer 1

所以我把你的问题解释为：

“单击选项但选择元素的值未更改时如何运行代码”

我的解决方案是从选择加载的选项中存储初始值。然后将旋转锁附加到选择元素。然后附加一个由旋转锁控制的点击事件。然后查看单击是否在最初加载的选项上。结果如下：

工作演示：http: //jsfiddle.net/NS4qr/3/

html

<select id="s1">
  <option value="1">1</option>
  <option value="3">2</option>
  <option value="3">3</option>
</select>

js

$(function(){
    (function(){
        var loadedOption = $("#s1 option:selected").val();
        var isOpen = false;

        $("#s1").blur(function(){
            isOpen = false;
        });

        $("#s1").click(function(){
            isOpen = !isOpen;
            if(isOpen)return;
            if(this.value == loadedOption){
             //window.location = $(this).val();
             alert($(this).val());
            }
        });
    })();
});

Answer 2

您可以在 jQuery 中为选项元素指定“单击”处理程序，并且您可以在选项元素上触发“单击”事件，也可以使用 jQuery，然后调用您的“单击”处理程序。

但是，选项元素上没有“单击”事件，因此实际单击它（用鼠标）不会创建单击事件。它将在选择元素上创建“更改”事件，但前提是您单击了未选择的选项。

例子：

<select id="testSelect">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<script type="text/javascript">
    $("#testSelect option").click(function (event) {
        console.log("option clicked");
    });

    $("#testSelect option[value='2']").click(); // console outputs "option clicked"
</script>

Answer 3

尝试同时使用“选择”和“点击”。就像是

$('body').on('change', '#nav-select', redirect);

$('body').on('click', '#nav-select option', redirect);