Question

在下面的代码中，我使用第一个bootstrap下拉列表列出要显示的选项。选择一个会创建一个带有两个输入字段的引导导航栏，一个签入字段，另一个下拉按钮和另外两个按钮。我把它放在一起就像你在下面的例子中看到的那样。问题是我在第一个下拉列表中做出的选择在第二个下拉列表中显示为标题，并且该下拉列表无法提供其他选项。

我似乎无法找到一种方法来防止两个下拉按钮项目发生冲突，我怎样才能让它们彼此独立？

<div id="container">
<div id="select1" class="dropdown">

    <button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation">
        <a href = "#" onclick = "showActivities('0')">Show All Stations in DB</a></li>
    <li class="divider"></li>
    <li role='presentation' class=' bg-success ' data-value="13"'>
        <a href='#' role='menuitem' onclick = 'showActivities(13)'>
            Item1
        </a>
    </li>
    <li role='presentation' class=' bg-success ' data-value="12"'>
        <a href='#' role='menuitem' onclick = 'showActivities(12)'>
            Item2
        </a>
    </li>
    </ul>
</div>
</div>

<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
    <div class=" container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"></a>
        </div>
        <form class="navbar-form navbar-left">
          <div class="form-group">

            <input id="cs1" type="text" class="form-control" placeholder="Call Sign"  tabindex=1 onkeyup="showHint(this.value);"  maxlength="16" onmousedown="isKeyPressed(event)" autofocus />

            <input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />

          </div>
        </form>

        <button id="ckin2" type="submit" class="btn btn-success" tabindex=3  >Check In</button>


        <div class="btn-group">
            <button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle" 
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Show/Hide
                <span class="caret"></span>
            </button>

            <div class="dropdown-menu" role="menu" aria-labelledby="menu1">
              <a role="menuitem" class="dropdown-item"  href="#">Show Grid</a><br>
              <a role="menuitem" class="dropdown-item"  href="#">Show eMail</a><br>
              <a role="menuitem" class="dropdown-item"  href="#">Show Lat/Lon</a><br>
              <a role="menuitem" class="dropdown-item"  href="#">Show Last Name</a><br>
              <a role="menuitem" class="dropdown-item"  href="#">Show TOD</a>
            </div>
        </div>

        <button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>

        <button id="closelog" class=" btn btn-danger navbar-btn closenet "  type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>    


    </div> <!-- end container fluid -->
</nav>

<ul  id="txtHint"></ul> 
            <div id="netids"></div>
    <br><br><br>
            <div id="actLog" class="hidden">net goes here</div>

如何在每个页面上创建不相互交互的多个引导程序下拉菜单？

0 个答案: