javascript - Select dropdown list not closing after selection - Stack Overflow

My issue is when I click on any item from the list the dropdown is not populated automatically and the list is not closed.

HTML code for dropdown list:

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    <option>dasd</option>
    <option>asdaaadsdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
</select>

Fiddle link.

My issue is when I click on any item from the list the dropdown is not populated automatically and the list is not closed.

HTML code for dropdown list:

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    <option>dasd</option>
    <option>asdaaadsdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
</select>

Fiddle link.

• javascript
• jquery
• html
• drop-down-menu
• html-select

Share Follow edited Oct 27, 2015 at 9:39 Anders 8,6531010 gold badges6060 silver badges9999 bronze badges asked Oct 27, 2015 at 9:23 ZivaZiva 23311 gold badge44 silver badges1919 bronze badges 3

• Can you please explain a little better what is your problem? – IlGala Commented Oct 27, 2015 at 9:27
• Ideally when we click on option from the dropdown, the drop down closes with the option we select. But it my case the drop down remains open even when I select the option. Check fiddle for reference – Ziva Commented Oct 27, 2015 at 9:29
• Why are you working on a label? set the first option with value -1 as "Select options"... – IlGala Commented Oct 27, 2015 at 9:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Add this to your script

$("#options option").click(function(){
    $("#choose").text($(this).text());
    $(this).parent().hide();
});

It looks like you are trying to recreate an already existing functionality by using JS and CSS, when some good old fashion HTML would do it for you. Remove the extra script and styling, and simply use:

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options'>
    <option>dasd</option>
    <option>asdaaadsdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
</select>

Please note that I removed the size="10" and style='display:none;' parts. The browser will take care of things like opening and closing the list of options, the down arrow, etc.

<select id='options'>
    <option value="0">--Select Options--</option>
    <option>abc</option>
    <option>bcd</option>
    <option>cde</option>
    <option>def</option>
    <option>efg</option>
    <option>fgh</option>
    <option>ghi</option>
    <option>hij</option>
    <option>ijk</option>
    <option>jkl</option>
</select>

I think this can help you