JQuery 过滤 select 鼠标输入不起作用

Question

我在这 jQuery/java 方面有点新手。我在这里和其他网站上搜索了很多提示页面，我的大部分代码都可以工作，但我有一个问题，到目前为止我还没有解决。

我想要的是一个层叠的 select 元素系列，这些元素可以更改后续 select 元素等中可用的值。最后的 select 是一个菜单选项，用户可以通过它来选择来自标准菜单列表（通过基于先前 select 所做选择的 jquery 过滤器填充）或来自具有可用菜单选项自动完成列表的文本框。

所有数据和选项都正确呈现，唯一的问题是最后一个 select 元素只能通过键盘访问，我不能用鼠标点击它，select的选项。

我怀疑它与同一 "onclick" 事件中的 java "handlers" 冲突有关，但我已经用尽了我有限的知识来解决它。

我尝试在 mozilla 论坛上寻求帮助，但运气不佳。 http://forums.mozillazine.org/viewtopic.php?f=38&t=2941553

JS 的过滤器部分在下方，但完整代码请参阅 http://jsfiddle.net/gcraill/woss5huL/。

$("#busarea").change(function() { 
    var id = $(this).val();
    if ($(this).data('options') == undefined){
        $(this).data('options',$('#stdmenu option').clone());
    } 
    var options = $(this).data('options').filter('[data-bu=' + id + ']');
    $('#stdmenu').html(options);
    if (id == "X"){ 
        document.forms["trntestform"]["menutype"].style.visibility='hidden';
        document.forms['trntestform']['menutype'].value = 'X';
    } else {
        document.forms["trntestform"]["menutype"].style.visibility='visible';
    }
    $("#menutype").trigger("change");
}).change();

我怀疑我的 java 是靠不住的（抱歉自学成才）而且我真的不知道所有 JQuery/java 的东西是如何联系在一起的，所以任何可以帮助解决这个问题的技巧FF 版本会很棒！

干杯 GC

Answer 1

您的这段代码是导致问题的原因：

else {
    if (mtyp == "*STD"){ 
                document.forms["trntestform"]["stdmenu"].style.visibility='visible';
                document.forms["trntestform"]["othmenu"].style.visibility='hidden';
            }
            if (mtyp == "*OTH"){ 
                document.forms["trntestform"]["stdmenu"].style.visibility='hidden';
                document.forms["trntestform"]["othmenu"].style.visibility='visible';
            }
    }

visibility 样式不会从屏幕上删除元素，只是让它们不可见。这里div：

<div class='toggle'><input type='text' name='othmenu' id='othmenu' placeholder='Start typing a menu name' size='25' maxlength='11' style='visibility: hidden;' /></div>

实际上总是在 stdmenu 下拉列表的顶部，所以你不能点击它，因为它上面有一个文本框（秘密地）。如果您想真正隐藏元素，使它们不在彼此之上，请尝试这样做：

else {
    document.forms["trntestform"]["stdmenu"].style.visibility='visible';
    document.forms["trntestform"]["othmenu"].style.visibility='visible';
        if (mtyp == "*STD"){ 
                        document.forms["trntestform"]["stdmenu"].style.display='block';
                        document.forms["trntestform"]["othmenu"].style.display='none';
                    }
                    if (mtyp == "*OTH"){ 
                        document.forms["trntestform"]["stdmenu"].style.display='none';
                        document.forms["trntestform"]["othmenu"].style.display='block';
                    }
    }

您可能需要调整样式，但这将使您的下拉菜单可点击。

JQuery 过滤 select 鼠标输入不起作用

JQuery filter on select input with mouse doesn't work

firefox

jquery

select

onclick

filter