I want to set a default value to Bootstrap dropdown and also once a value i selected, the selected value displays. I'm not sure where to start but I have the fiddle included.
So I want the dropdown to say "Document #" by default, and once I select Party ID, then it stays there.
<input type=text placeholder='search text' />
<div class="btn-group">
<button class="btn btn-info">SEARCH BY</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Document #</a></li>
<li><a href="#">Party ID</a></li>
</ul>
</div>
Here you go Ray:
There are several ways to do this and I did this a little more verbose than I would personally but this was to help you understand what's happening..cheers.
Updated fiddle => http://jsfiddle.net/chazelton/uPd3C/6/
$(document).ready(function () {
// you'll need to change these option values to whatever you need them to be.
var options = ['PartyID', 'two', 'three'];
var ddl = $('ul.dropdown-menu');
ddl.append('<li class="active"><a href="#">Please Select</a></li>')
$.each(options, function (k,v) {
var li = $('<li><a href="#">' + v + '</a></li>');
li.data('value', v);
li.on('click', function () {
var val = $(this).data('value');
$('ul.dropdown-menu li').removeClass('active');
$('input.result').val(val);
$('button.search').text('SEARCH BY ' + val);
$(this).addClass('active');
});
ddl.append(li);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.