jQuery是否可以将`event.preventDefault()`与`select`元素一起使用? [英] Is it possible to use `event.preventDefault()` with a `select` element with jQuery?

问题描述

我有一些下拉菜单，这些下拉菜单取决于其他下拉菜单.

I have dropdowns which are dependent on other dropdowns.

我决定计算click的依赖关系，除了它会显示选项元素带来讨厌的副作用，然后它们迅速消失并且下拉列表重新调整大小.

I decided to calculate the dependencies on click, except it has a nasty side effect of showing option elements, then they quickly disappear and the dropdown list resizes.

我想知道是否可以在单击时使用event.preventDefault()，然后在计算出可能的选项后手动调用click()事件.

I wondered if I could use event.preventDefault() on click, and then call the click() event manually after I have calculated the possible options.

它似乎没有用.

解决此问题的最佳方法是什么?

What is the best way around this?

这是我的jQuery

Here is my 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();

谢谢！

很抱歉，您可以在 JSBin 上看到此行为.

Sorry for any confusion, you can see this behaviour on JSBin.

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

You can not select one from the other - i.e. they can never have the same value.

在我的Firefox 3.6.6中，您将看到计算它们可能显示的内容之间的丑陋跳转.

In my Firefox 3.6.6, you will see the ugly jump between it calculating what it may display.

我意识到只有2个select我可以使用.siblings().hide()，但是如果我需要2个以上，它将不起作用(稍后再介绍).

I realise for 2 selects only I could use .siblings().hide(), but it won't work if I need more than 2 (which I will later).

我的理想行为是单击select并使其不跳动地显示可用选项.我想也许是我的show()是罪魁祸首，但是它使代码保持简单.

My ideal behaviour would be to click the select and have it show with no jump the available options. I think maybe my show() is the culprit, however it keeps the code simple.

推荐答案

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

I am still not sure that i am fully understanding your question. but this may work for you. If you have problems, i will be glad to help you, but i would need a better explanations.

• http://jsfiddle.net/kn73G/
>

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>​

JavaScript

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

这篇关于jQuery是否可以将`event.preventDefault()`与`select`元素一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！