How to fetch selected value of button using javascript

Question

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>

Answer 1

It looks like you're using Bootstrap. Bootstrap components often require 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.

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.