如何使用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。 自舉組件通常需要jQuery。 使用jQuery將點擊處理程序綁定到要從中檢索值的每個下拉項（在本例中為<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>標記，並在單擊搜索按鈕時對其進行查詢，因此您不必創建變量並對其進行更新。