I want to change the value of a text box with the item I select from a dropdown menu. But it's not working.
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<div class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>
This is my jquery code:
$('.dropdown-item').click(function (){
$('#area-inout').val() = $('.dropdown-item').text();
})
Can anyone help me?
try :
$('.dropdown-menu .dropdown-item').on('click', function(){
$("#area-zone").val($(this).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Jway</a></li>
<li><a class="dropdown-item" href="#">Atrod</a></li>
</ul>
</div>
Try this
$('.dropdown-menu .dropdown-item').on('click', function(){
$("#area-zone").val($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<div class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item d-area-input" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>
Try this!
$("div#dropDownSelect").click(function(e){
document.getElementById('inputBox').value = e.target.innerHTML;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputBox" value="" class="dropdown-toggle" type="text" name="area-zone" id="area-zone"
data-toggle="dropdown">
<div id="dropDownSelect" class="dropdown-menu" role="menu" aria-labelledby="area-zone">
<a class="dropdown-item d-area-input" href="#">Jway</a>
<a class="dropdown-item" href="#">Atrod</a>
</div>
Please change the dorpdown_name with your selectbox name
<script>
$('select[name="dorpdown_name"]').change(function() {
$('#area-zone').val($(this).val());
})
</script>
Related
I have many (dynamic) input with each having its own dropdown
I want to keep the dropdown popup in focus when the current input is active/being typed , now the issue is my dropdown menu closes when I type in textbox
I cannot use ID selector and hard code since the number of dropdowns are dynamic.
I have tried with
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." id="myInput" class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function(){
$('.dropdown-item').click(function(e){
var value = $(this).data('value');
var textElement = $(this).parent().parent().prev()
textElement = textElement.val(textElement.val() + value);
event.preventDefault();
event.stopPropagation();
textElement.focus()
});
});
$(".search").keyup(function(){
var input, filter, ul, li, a, i;
input = $(this).get(0);
filter = input.value.toUpperCase();
div = $(this).parent().get(0);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
});
(function() {
var disable = false;
$('.dropdown-toggle').on('mousedown touchstart', function() {
disable = true;
console.log("inside1")
})
.on('focus', function() {
if (!disable) {
$(this).dropdown('toggle'); console.log("inside2")
}
})
.on('mouseup touchend',function() {
disable = false;console.log("inside3")
})
})()
</script>
</body>
</html>
$(document).ready(() => {
$(".input-group > input")
.on("focus", (e) => {
let inputEl = e.currentTarget;
let dropdownEl = inputEl.parentElement.querySelector(".dropdown-menu");
$(dropdownEl).show();
})
.on("blur", (e) => {
// If click outside the input, check for condition to hide the dropdown
let inputEl = e.currentTarget;
let dropdownEl = inputEl.parentElement.querySelector(".dropdown-menu");
let dropdownSearchEl = dropdownEl.querySelector('.search');
if (e.relatedTarget == dropdownSearchEl) {
// Check if the target is the input insdie dropdown, then return to prevent the dropdown hiding
return;
}
$(dropdownEl).hide();
})
.on('keyup', (e) => {
let inputEl = e.currentTarget;
let dropdownEl = inputEl.parentElement.querySelector(".dropdown-menu");
let dropdownSearchEl = dropdownEl.querySelector('.search');
// Un-comment here if you want to set the value of the dropdown input as the value of the actual input
// dropdownSearchEl.value = inputEl.value;
});
$(".search")
.on("blur", (e) => {
// When click outside the dropdown search input, hide the dropdown
let dropdownInputEl = e.currentTarget;
let dropdownEl = dropdownInputEl.parentElement;
$(dropdownEl).hide();
})
.on("keyup", function() {
var input, filter, ul, li, a, i;
input = $(this).get(0);
filter = input.value.toUpperCase();
div = $(this).parent().get(0);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
});
});
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." id="myInput" class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group input-group-sm ">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append input-group-sm">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu">
<input type="text" placeholder="Search.." class="search">
<a class="dropdown-item" data-value="{{Action}}" href="#">Action</a>
<a class="dropdown-item" data-value="{{Another action}}" href="#">Another action</a>
<a class="dropdown-item" data-value="{{Something else here}}" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" data-value="{{Separated lin}}" href="#">Separated link</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</script>
</body>
</html>
Since you are using Bootstrap dropdown, you can use its Popover methods to toggle show/hide the dropdown Bootstrap Popover.
The steps I do to achieve what you want:
Assign event focus and blur on the input to show/hide the dropdown. Inside the blur event, I check for the condition if the user click on the dropdown's input, then still keep the dropdown opening
Assign the event blur on the dropdown input to hide the dropdown
Ps: Using the jQuery event you can get the related DOM element, to experiment a little bit further, you can log the event then use the Devtool to look for the element you want to get. As you can see, in the script, I use event.currentTarget to get the element that the user click on. That's solve the problem.
I'm using bootstrap to style a dropdown button and I'd like to have the button text change to whatever item is selected from the dropdown. I'm guessing JavaScript is the best way to make this happen, but I'm not that familiar with it yet. Any help would be greatly appreciated.
Here is my html for the first dropdown button. Thanks
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genre
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item" type="button">Adventure</button>
<button class="dropdown-item" type="button">Sci-Fi</button>
<button class="dropdown-item" type="button">Comedy</button>
</div>
#finiteloop thanks for your help. Based on the direction you pointed me in I added an onclick event for each dropdown element and added the following function which does what I need:
<div class="dropdown mx-3">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genre
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item" type="button" onclick="showGenre(this)">Adventure</button>
<button class="dropdown-item" type="button" onclick="showGenre(this)">Sci-Fi</button>
<button class="dropdown-item" type="button" onclick="showGenre(this)">Comedy</button>
</div>
</div>
function showGenre(item) {
document.getElementById("dropdownMenu1").innerHTML = item.innerHTML;
}
#MasterShake20 you could do something like this and integrate it into your code:
<!DOCTYPE html>
<html>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<p>Click the button to change the selected fruit to banana.</p>
<button id="btnTxt" type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let buttonVal = document.getElementById("mySelect").value;
document.getElementById('btnTxt').innerHTML = buttonVal;
}
</script>
</body>
</html>
See how this works here:
https://www.w3schools.com/code/tryit.asp?filename=GI7I2WCF1N82
This is not exactly what you are trying to do, but it could set you in the right direction and give you an idea of what needs to happen.
Also, if you are just starting out, W3 is a great resource, so check their JavaScript Tutorials out here:
https://www.w3schools.com/js/default.asp
:D
with jquery is easy:
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Number
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
<script>
$(".dropdown-toggle").next(".dropdown-menu").children().on("click",function(){
$(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});
</script>
if you have more components in your page and want this behavior for specifics components,
add an property to correct select only its:
(in this example, add property changeable="true")
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" changeable="true">
Number
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
<script>
$(".dropdown-toggle[changeable=true]").next(".dropdown-menu").children().on("click",function(){
$(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});
</script>
$(".dropdown-toggle").next(".dropdown-menu").children().on("click", function() {
$(this).closest(".dropdown-menu").prev(".dropdown-toggle").text($(this).text());
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Number
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
I have markup for twitter bootstrap dropdown like below
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
Now, added click event in dropdown using jquery as below
$('.dropdown-menu a').click(function () {
alert("Hi")
});
My click event is working but, I am not able to update the selected value in dropdown. How to do it?
$('.dropdown-menu a').click(function () {
$('button').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" style="width: 300px !important;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Source
</button>
<div class="dropdown-menu" id="SelectMe">
<a class="dropdown-item" href="#">CLE</a>
<a class="dropdown-item" href="#">SQL</a>
<a class="dropdown-item" href="#">FFILE</a>
<a class="dropdown-item" href="#">SampleAPI</a>
</div>
</div>
use $('button').text($(this).text()); to set value to button.
try this
$('.dropdown-menu a').click(function () {
$('button[data-toggle="dropdown"]').text($(this).text());
});
DEMO HERE
I have a table created with dynamically created number of rows. Every row has a dropdown-menu button.
I want to show the selected item from dropdown-menu on the dropdown-menu button, but am unable to do so. Below is my code:
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<ul class="dropdown-menu" role="menu" onchange="selectFromDropDown(this.value)">
<li><a id="option1" selected>option 1</a></li>
<li><a id="option2">option 2</a></li>
<li><a id="option3">option 3</a></li>
</ul>
</div>
</td>
The javascript code is as below
function selectFromDropDown(value){
$(document).ready(function() {
$(".dropdown-menu li a").click(function(){
var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
parent.html($(this).text());
parent.val($(this).data('value'));
});
});
}
Try text() instead of html():
parent.text($(this).text());
Also, $(this).data('value')) is undefined. So the attribute value will not be set to anything.
I will suggest you to use $(document).ready(function() { to wrap the whole code instead of using it inside the function.
$(document).ready(function() {
function selectFromDropDown(value){
$(".dropdown-menu li a").click(function(){
var parent = $(this).parents(".dropdown").find('.dropdown-toggle');
parent.text($(this).text().trim());
parent.val($(this).data('value'));
});
}
selectFromDropDown($('.dropdown-menu').val());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="option1" selected>option 1</a></li>
<li><a id="option2">option 2</a></li>
<li><a id="option3">option 3</a></li>
</ul>
</div>
</td>
I have a bootstrap dropdown but i am not able to set the selected menu item as default selected dropdown item?
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a></li>
<li><a class="dropdown-item" href="#">Category 2</a></li>
<li><a class="dropdown-item" href="#">Category 3</a></li>
<li><a class="dropdown-item" href="#">Category 4</a></li>
</ul>
</div>
<script>
$('.dropdown-toggle').click(function()
{
$('.dropdown-menu').toggle();
});
</script>
I have created a JSFiddle for the above code.
Try this
$(function() {
$(".dropdown-menu li a").click(function() {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a>
</li>
<li><a class="dropdown-item" href="#">Category 2</a>
</li>
<li><a class="dropdown-item" href="#">Category 3</a>
</li>
<li><a class="dropdown-item" href="#">Category 4</a>
</li>
</ul>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a></li>
<li><a class="dropdown-item" href="#">Category 2</a></li>
<li><a class="dropdown-item" href="#">Category 3</a></li>
<li><a class="dropdown-item" href="#">Category 4</a></li>
</ul>
</div>
<script type="text/javascript">
$('.dropdown-item').click(function(){
$("#drpDownCat").text(this.text)
});
</script>
</body>
</html>