0

Bootstrap ドロップダウンにデフォルト値を設定したいのですが、値を選択すると、選択した値が表示されます。どこから始めればよいかわかりませんが、フィドルが含まれています。

そのため、デフォルトでドロップダウンに「Document #」と表示し、Party ID を選択すると、そこにとどまります。

<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>

フィドル

4

1 に答える 1

0

ほら、レイ：

これを行うにはいくつかの方法があり、私はこれを個人的に行うよりも少し冗長にしましたが、これは何が起こっているのかを理解するのに役立つ..乾杯.

更新されたフィドル => 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);              
 });
});
于 2013-05-22T23:44:24.510 に答える