使用鼠标选择输入的 JQuery 过滤器不起作用

Question

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

我想要的是一系列级联的选择元素，这些元素可以更改以下选择元素中可用的值等。最终选择是一个菜单选项，用户可以从标准菜单列表中进行选择（通过基于 jquery 过滤器的之前所做的选择）或来自具有可用菜单选项自动完成列表的文本框。

所有数据和选项都正确呈现，唯一的问题是最后一个选择元素只能通过键盘访问，我无法用鼠标单击它并选择其中一个选项。

我怀疑在同一个“onclick”事件上存在冲突的 java“处理程序”，但我已经用尽我有限的知识来解决这个问题。

我尝试在 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 版本上解决这个问题的技巧都很棒！

干杯 气相色谱

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';
                    }
    }

您可能需要调整样式，但这会让您的下拉菜单成为可点击的。