Question

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

我想要的是一系列级联的选择元素，它们可以改变以下选择元素等中可用的值。最终选择是一个菜单选项，用户可以从标准菜单列表中选择（通过基于的jquery过滤器填充）之前的选择选项）或文本框中包含可用菜单选项的自动完成列表。

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

我怀疑它与一些冲突的java＆＃34;处理程序＆＃34;在同一＆＃34; onclick＆＃34;事件，但我已经用尽了有限的知识来搞清楚。

我在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过滤器不起作用

1 个答案: