CODEWITHSUNDEEP
javascriptjqueryforms
Al-76
Al-76

Reputation: 1878

How do I create a dropdown that when selected updates an input field?

I have the below code to create a form input field which the user can type their search query into as normal. However, I also want to dropdown option to be part of this input. The problem I have, is that when the user selects an option from this dropdown, there is no placeholder text that appears in the input field or nor does the input text change to show the user what they just selected from the dropdown. I tried to write a small script which would detect if an li a was selected and it would update the input field accordingly but I am a bit stuck. Any help welcome. 

    <form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control" placeholder="Search">
                            <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li class="input"><a href="#">black</a></li>
                                <li class="input"><a href="#">white</a></li>
                                <li class="input"><a href="#">red</a></li>
                                <li class="input"><a href="#">blue</a></li>
                                <li class="input"><a href="#">yellow</a></li>
                            </ul>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>

$('ul li a').on('select', function () {
     var selectedOption = $(this).find("placeholder").text();
     $(this).text(selectedOption);
})

Upvotes: 0

Views: 39

Answers (2)

Nihar Sarkar
Nihar Sarkar

Reputation: 1299

Try this code :

 $('#color-dropdown-menu li').click( function () {
$('.form-control').attr('placeholder',$( this ).text());

});

HTML :

<form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control" placeholder="Search">
                            <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li class="input"><a href="#">black</a></li>
                                <li class="input"><a href="#">white</a></li>
                                <li class="input"><a href="#">red</a></li>
                                <li class="input"><a href="#">blue</a></li>
                                <li class="input"><a href="#">yellow</a></li>
                            </ul>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>

CHECK IT

Upvotes: 0

Edison Biba
Edison Biba

Reputation: 4433

Here you have an working jsfiddle

$('ul li a').on('click', function () {
     var selectedOption = $(this).text();

    $('.form-control').val(selectedOption);
})

Upvotes: 2

Related Questions