javascript - 如何在 php 中使用 jquery 或 javascript 从 bootstrap 下拉菜单中打印所选元素

Question

我想显示在下拉列表中选择的文本。我希望当用户选择必须打印元素值的下拉列表 li 元素时。我该如何解决这个问题请帮助。谢谢....

这是代码:

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

.dropdown-menu{
max-height: 300px;
overflow: auto;
top: 15px;
position: absolute;
left: 0px
margin-top:50px;
}

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container-fluid">
            <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a href="#" class="brand">Project name</a>
            <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li>
                        
                        <ul class="dropdown-menu sub-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form action="" class="navbar-search pull-left">
                <input type="text" placeholder="Search" class="search-query span2">
              </form>
              <ul class="nav pull-right">
                <li><a href="#">Link</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                  <a class="#" href="#">Menu</a>
                </li>
              </ul>
            </div><!-- /.nav-collapse -->
          </div>
      </div>
    </div>
    
    <hr>
    
    <ul class="nav nav-pills">
    <li class="active"><a href="#">Regular link</a></li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" id="menu1">
        <li>
            <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
            <ul class="dropdown-menu sub-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">Menu</a>
    </li>
    <li class="dropdown">
      <a href="#">Menu</a>
    </li>
    </ul>

Answer 1

你可以简单地做:

$('.dropdown-menu li a').click(function(){
    alert($(this).text());
});

DEMO

想法是找到下拉菜单中的通用模式，即类 .dropdown-menu 然后绑定(bind) click()目标 li 和 a 上的事件。要获取内部内容，请使用 text()