Javascript 是否可以将`event.preventDefault（）`与带有jQuery的`select`元素一起使用？

我的下拉列表依赖于其他下拉列表

我决定在单击时计算依赖项，除了它有一个令人讨厌的副作用，即显示选项元素，然后它们很快就会消失，下拉列表也会调整大小

我想知道是否可以在单击时使用

event.preventDefault（）

，然后在计算可能的选项后手动调用

click（）

事件

它似乎不起作用

最好的解决办法是什么

这是我的jQuery

var $selects = $('form#main select');


$selects.click(function(event) {
    var $thisSelect = $(this);
    event.preventDefault(); // Doesn't cancel anything

    // Get the other selected values
    var selectedIndexes = [];
    $selects.not($thisSelect).each(function() {
        var index = $(this)[0].selectedIndex;
        selectedIndexes.push(index);
    });

    // I think this is where the problem lies -
    // it is my lazy way of showing them all again before I hide
    // what needs to be hidden
    $selects.find('option').show();

    // Remove them from this dropdown
    $.each(selectedIndexes, function(i, index) {

        $thisSelect.find('option').eq(index).hide();

    });

}).click();

谢谢

更新 抱歉造成任何混乱，您可以在上看到此行为

您不能从另一个中选择一个-即，它们不能具有相同的值

在我的Firefox 3.6.6中，你会看到它之间的丑陋跳跃，计算它可能显示什么

我意识到，对于2

select

s，我只能使用

.sibbines（）.hide（）

，但如果我需要2个以上的，它就不起作用了（稍后我会这样做）

---

我的理想行为是单击

选择

，并在不跳转的情况下显示可用选项。我想我的

show（）

可能是罪魁祸首，但它保持了代码的简单性。

我仍然不能确定我是否完全理解你的问题。但这可能对你有用。 如果你有问题，我很乐意帮助你，但我需要更好的解释

HTML

<select id="left">
    <option value="">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select id="right">
    <option value="">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>​

---

我对你想要达到的目标感到困惑。。。我已经一遍又一遍地读了5分钟了…@Reigel我在JSBin上设置了一些东西来演示，我现在正在编辑问题。谢谢。我相信，除了Firefox，显示/隐藏选项在任何地方都不起作用。当然不是在IE中。我建议只根据页面上可能选项的javascript数组或通过对服务器的AJAX调用生成其他选项，然后一次替换所有内容。禁用如何？像这样，@Reigel工作正常，但对我的时间选择器下拉列表（它允许您以15分钟的增量从00:00输入到23:45）不好。在这种情况下，我宁愿显示唯一有效的选项（以使列表更小）。谢谢你的评论。

$(document).ready(function() {

    var left = $("#left");
    var right = $("#right");

    left.change(function(){
        if (right.val() == $(this).val()) {
            alert("error");
            $(this).attr("selectedIndex", "0");
        }
    });

    right.change(function() {
        if (left.val() == $(this).val()) {
            alert("error");
            $(this).attr("selectedIndex", "0");
        }
    });
});