javascript - 如何使用javascript获取按钮的选定值

Question

我有以下搜索栏代码，其中有一个我在按钮上开发的下拉列表和一个用于键入搜索查询的文本字段。

点击按钮我正在使用检索文本

document.getElementById('').value;

但是如何获取下拉按钮的选定文本呢？

我的代码:

<div class="input-group">
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
            <span id="search_concept">T Shirts</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#its_equal">Watches</a></li>
        </ul>
    </div>
    <input type="hidden" name="search_param" value="all" id="search_param">
    <input type="text" class="form-control" id="niket" placeholder="Search term...">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</div>

Answer 1

看起来您正在使用 Bootstrap。 Bootstrap 组件通常需要 jQuery。使用 jQuery 将点击处理程序绑定(bind)到您要从中检索值的每个下拉项，在本例中为 <a>标签。

您可以将该值存储在一个变量中，并在单击搜索按钮时检索它。

(function(window, document, $, undefined) {

  var dropdownValue;

  /* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */
  $('.dropdown-menu a').each(function(i, item) {

    /* Add click handler to each one, whenever one is clicked the
       dropdownValue variable is updated with it's value */
    $(this).on('click', function(e) {
      dropdownValue = this.innerText;
    });

  });

  /* Retrieve dropdown value */
  $('#apply').on('click', function(e) {
    alert(dropdownValue);
  });

}(window, window.document, jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span id="search_concept">T Shirts</span>  <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#its_equal">Watches</a>
      </li>
      <li><a href="#its_equal">Ties</a>
      </li>
    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">
  <input type="text" class="form-control" id="niket" placeholder="Search term...">
  <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
  </button>
  </span>
</div>

另一种方法是将类应用于选定的 <a>单击搜索按钮时标记并查询它，这样您就不必创建变量并更新它。