[英]How to fetch selected value of button using javascript
I have following code for search bar where there is a Drop down list which I have developed on button and a text field to type search query. 我在搜索栏上有以下代码,其中有一个在按钮上开发的下拉列表和一个用于键入搜索查询的文本字段。
On button click I am retrieving text using 在按钮上单击我正在使用检索文本
document.getElementById('').value;
But how can fetch selected text of drop down button? 但是如何获取下拉按钮的选定文本?
My code : 我的代码:
<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>
It looks like you're using Bootstrap. 看来您正在使用Bootstrap。 Bootstrap components often require jQuery.
自举组件通常需要jQuery。 Use jQuery to bind a click handler to each of the dropdown items you want to retrieve a value from, in this case the
<a>
tags. 使用jQuery将点击处理程序绑定到要从中检索值的每个下拉项(在本例中为
<a>
标记)。
You can store that value in a variable and retrieve it when the search button is click. 您可以将该值存储在变量中,并在单击搜索按钮时检索它。
(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>
Another way would be to apply a class to the selected <a>
tag and query for that when the search button is clicked so you don't have to create a variable and update it. 另一种方法是将一个类应用于所选的
<a>
标记,并在单击搜索按钮时对其进行查询,因此您不必创建变量并对其进行更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.