Twitter下载没有显示

Question

我有两个下拉菜单：

首次下拉：

首次下拉代码：

<select name="idx" id="masthead_search">                     
    <option value="">Library catalog</option>                           
    <option value="ti">Title</option>                           
    <option value="au">Author</option>                            
    <option value="su">Subject</option>
    <option value="nb">ISBN</option>                                                       
    <option value="se">Series</option>
    <option value="callnum">Call number</option>                                                       
</select>

第二次下拉：

第二个下拉代码：

 <select name="branch_group_limit" id="select_library">
     <option value="">All libraries</option>                                       
     <option value="branch:01">Main Library</option>                                            
 </select>

为了在悬停时更改选项标签的高亮背景，我使用此jquery代码将select和option标签转换为ul li标签。

/** Convert a select-option tag to ul-li tag to change its dropdown highlight color from blue to green  **/
$(document).ready(function(){

     /**masthead_search **/
     $('#masthead_search').parent().prepend('<div class="btn-group btn-input clearfix">   <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">Library catalog</span> <span class="caret"></span></button><ul id="newmasthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');

     $('#masthead_search option').each(function(){
     $('#newmasthead_search').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
     $('#newmasthead_search').append('</ul></div>');
     $('#masthead_search').remove();
     $('#newmasthead_search').attr('id', 'masthead_search');

     /**select_library **/
     $('#select_library').parent().prepend('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">');
     $('#select_library option').each(function(){
     $('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
     $('#newselect_library').append('</ul></div>');
     $('#select_library').remove();
     $('#newselect_library').attr('id','select_library');
});

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

    var $target = $( event.currentTarget ); 
    $target.closest( '.btn-group' )
    .find( '[data-bind="label"]' ).text( $target.text() )
    .end()
    .children( '.dropdown-toggle' ).dropdown( 'toggle' );

    return false; 
});

执行代码后，下拉列表如下所示：

首次下拉：

首次下拉代码：

<div class="btn-group btn-input clearfix">
        <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
            <span data-bind="label">Library catalog</span> 
            <span class="caret"></span>
        </button>

        <ul id="masthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li value="" role="presentation"><a tabindex="-1" role="menuitem">Library catalog</a></li>
            <li value="ti" role="presentation"><a tabindex="-1" role="menuitem">Title</a></li>
            <li value="au" role="presentation"><a tabindex="-1" role="menuitem">Author</a></li>
            <li value="su" role="presentation"><a tabindex="-1" role="menuitem">Subject</a></li>
            <li value="nb" role="presentation"><a tabindex="-1" role="menuitem">ISBN</a></li>
            <li value="se" role="presentation"><a tabindex="-1" role="menuitem">Series</a></li>
            <li value="callnum" role="presentation"><a tabindex="-1" role="menuitem">Call number</a></li>
        </ul>
</div>

第二次下拉：

第二个下拉代码：

<div class="btn-group btn-input clearfix open">
    <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
       <span data-bind="label">All libraries</span> 
       <span class="caret"></span>
    </button>
    <ul id="select_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li value="" role="presentation"><a tabindex="-1" role="menuitem">All libraries</a></li>
        <li value="branch:01" role="presentation"><a tabindex="-1" role="menuitem">Main Library</a></li>
    </ul>
</div>

但是当我调整浏览器窗口大小并单击第一个按钮时，我的第一个下拉列表没有显示。当我点击我的第二​​次下拉时，显示的下拉列表就是我第一次下拉中的下拉列表。

首次下拉：

第二次下拉：

我哪里出错了？请帮帮我。

Answer 1

好的，所以这不是你问题的真正答案，但我不能将其纳入评论，我认为需要说。

你真的需要仔细考虑是否为了改变你想要做的所有这些下拉物品的颜色。这是一个非常严重的HTML滥用，看起来它已经（并将继续）引导你陷入尴尬和问题的兔子洞。你在这里做的是扔掉<select>元素并用<ul>替换它。您可能会认为＆＃39;所以＆＃39;它看起来和工作正常，并且让您对样式进行更大程度的控制，让我试着说服您为什么要坚持使用<select>。

你会发布很多有趣的数据

看起来您正在将这些下拉列表作为搜索表单的一部分。这意味着它将位于<form>元素内，其中包含 http://myawesomewebsite.com/search 之类的操作，并且您的搜索按钮是提交按钮。当您点击提交时，页面将收集表单中的所有表单字段并将其发布到搜索页面。你打算如何使页面POST你选择的选项？从其中一条评论的外观来看，您可能会在某处更新隐藏的<select>某种JavaScript吗？这样可行，但不是很漂亮。

手机/触摸屏与精选

配合得很好

您显然正在开发移动设备/触摸屏设备。大！太多人仍然没有打扰。单击原生选择元素（取决于特定设备/浏览器），当您单击它时，会呈现一个漂亮的可滚动列表，这对于小屏幕上的用户来说比点击列表更容易，而下拉列表可能会超出底部用户小屏幕。在手机上浏览的用户在点击下拉列表时会看到他们的设备本机列表选择器，没有充分的理由不打破人们的期望。

造型/定位问题

就像你现在得到的那个。原生选择列表将完美定位。不需要黑客甚至是JavaScript。

其他事项

请记住，我提到过滥用HTML＆＃39;之前，如果您希望用户从列表中进行选择，那么应该呈现的元素是<select>，这就是HTML标准的定义方式。这也有助于辅助功能设备了解您的元素是什么以及它应该如何使用它。呈现为<ul>的下拉列表对于屏幕阅读器确实没有意义，但带有<select>标记的<option>非常有意义。我认为Bootstrap在帮助屏幕阅读器理解其专业下拉菜单等方面做得相当不错，但我不是无障碍专家，所以我不确定。

我不了解你，但每当我使用一个选择框时，我点击它，按下键盘上的一个键，该键对应于我所追求的第一个字母并点击输入。你不能通过Bootstrap下拉列表做到这一点（虽然它们是键盘可访问的，所以这很好）。在您的情况下，这可能并不重要，因为您的选项有限，但有了更多选项，这可以为您的用户群中的超级用户节省时间。

您是否也注意到在Bootstrap文档中他们甚至没有向您展示如何以这种方式使用下拉菜单的示例？他们提供的唯一示例是基于带链接的菜单，而不是替换选择。这可能是一个很好的理由。

所以，总之

我很清楚总会有理由自定义超出原始规格的内容，但是如果你可以提供帮助，那么总是尝试使用这些元素来实现它们的设计目标。还有比我在这里提到的更多的陷阱，任何未来接管这些代码的开发人员都会更喜欢简单的选择框而不是复杂的jQuery依赖解决方案。我承认选择框的样式一直是一个问题，但从我所看到的这个特殊情况，我建议只是坚持选择。

但是，如果您仍想使用此解决方案，我可以建议您使用所有相关的HTML和JavaScript创建Bootply您的问题，这样我们就可以拥有更好的解决方案破解复制你的问题。

我希望这不会像居高临下一样，我绝不会说你在做什么是错的，因为我对你的确切情况一无所知，我只是觉得解释一下保持简单的潜在好处可能会帮助您或未来的访问者提出这个问题。