Question

听取选择的改变很容易：

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

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

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

尝试：

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

不起作用......

编辑：要明确：

我选择了默认选项foo。我想抓住这个：

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

Answer 1

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

“单击选项时如何运行代码，但select元素的值没有改变”

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

工作演示：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中为option元素指定“click”处理程序，你可以在一个option元素上触发一个“click”事件，也可以使用jQuery，然后调用你的“click”处理程序。

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

示例：

<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);

关于“选择选项”的jQuery选择

3 个答案: