Develop Reference

How to set dropdown button text based on selected option?

I have the following in an HTML form:
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
</span>
</div>
How do I set the name of the button to the value selected from the dropdown menu? I think I need to register an event handler on the button ("userNamesActionButton") and call a function, but how does that function have to look like? I've been unsuccessful so far, but am admittedly not a pro on Jquery, so looking for help here
Thanks!

You can do something like:
You should consider reading jQuery, as it's too much easy for a newbie too.
I have noticed you are using bootstrap, if you want caret without modifying dom, then do as like below.
$('#userNamesActionButtonMenu').on('click', 'li', function(){
$('#userNamesActionButton').html($(this).text()+' <span class="caret"></span>');
});
.input-group{
margin: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
</span>
</div>
If you can modify dom then change these:
DOM From
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
TO:
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
<span class="action-btn-text"></span> <span class="caret"></span>
</button>
And change js to:
$('#userNamesActionButtonMenu').on('click', 'li', function(){
$('.action-btn-text').text($(this).text());
});

How do I set the name of the button to the value selected from the dropdown menu?
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
<script>
function changeButtonText(value){
document.getElementById('userNamesActionButton').innerText = value;
}
</script>
</span>
</div>

I copied the exact same code from getbootstrap for the fluid navbar header and now the navbar toggle when i shrink the webpage doesn't respond

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Store Home</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<style>
div#headermenu > div{
float: left;
margin:0px 0px 0px 10px;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
color:#000;
text-decoration:none;
}
a:active{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
div.dropmenus{
display:none;
z-index:2;
}
div.dropmenus > a{
display:block;
text-decoration:none;
color:#000;
}
button{
margin:4px;
}
</style>
<script src="js/getID.js"> </script>
<script type="text/x-javascript">
var ma = ["dropmenu1","dropmenu2","dropmenu3","dropmenu4","dropmenu5"];
function dropMenu(x){
for(var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if( document.getElementById(x).style.display == "block"){
document.getElementById(x).style.display = "none";
}else{
document.getElementById(x).style.display = "block";
}
}
</script>
</head>
<body>
<!--<?php include_once("template-header.php");?> -->
<nav class="navbar navbar-default" style="margin-bottom:5px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Joe Carlo Saber W serge</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Help</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-left" action="search.php" method="post" style="margin-bottom:4px;margin-top:4px;">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" name="search">
</div>
<button type="submit" class="btn btn-info" style="margin-bottom:4px;">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="glyphicon glyphicon-shopping-cart" ></a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="headermenu">
<div id="cont1">
<button class="btn btn-default">
computer parts
<span class="caret"> </span>
</button>
<div id="dropmenu1" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<div id="cont2">
<button class="btn btn-default">
Computers
<span class="caret"> </span>
</button>
<div id="dropmenu2" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
</div>
</div>
<div id="cont3">
<button class="btn btn-default">
Accessories
<span class="caret"></span>
</button>
<div id="dropmenu3" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<div id="cont4">
<button class="btn btn-default">
Gaming
<span class="caret"></span>
</button>
<div id="dropmenu4" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<div id="cont5">
<button class="btn btn-default">
Networking
<span class="caret"></span>
</button>
<div id="dropmenu5" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<!--add new categories here. -->
</div>
<div id="pageContent" onmousedown="dropMenu()" style="height:500px;"> </div>
<script src="js/jquery-min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js" ></script>
</body>
</html>
Here is my code. The dropdown didn't work for me, so I had to make one from js.
I am adding the jquery to the bottom of the page and I also tried to add the other jquery from the bootstrap source code and still nothing worked I have js enabled in my browser.

You are not declaring the scripts the right way. Use src instead of href
<script type="text/javascript" src="js/bootstrap.min.js" ></script>

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>Watches</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 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>Watches
</li>
<li>Ties
</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.

btn-block with splited button dropdown

The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:

You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/

Vertical group of buttons in Bootstrap 2.3.2

Bootstrap 3 has CSS class btn-group-vertical. Could you help me please, how can I achieve the same result in Bootstrap 2.3.2?
Here is what i want to achieve:
http://jsfiddle.net/Lc9012o6/
Here is the same group of buttons in Bootstrap 2.3.2
http://jsfiddle.net/999tv48t/
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Add
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>Vertex</li>
<li>Edge</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Update
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>Vertex</li>
<li>Edge</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Remove
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>Vertex</li>
<li>Edge</li>
</ul>
</div>
<button type="button" class="btn btn-default">Merge vertices</button>
</div>
edit:
When I use css class btn-group btn-group-vertical, behaviour of dropdown buttons is strange http://jsfiddle.net/q0r49anL/

this is CSS update of .btn-group-vertical class:
.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
display: block;
}
.btn-group-vertical>.btn:last-child {
border-radius: 4px;
}
live preview: http://jsfiddle.net/999tv48t/5/