expand a drop downlist when click on the more option

337 views Asked by At

I have a dropdownlist and it contains a list of names and a 'more' option.When the user click on the more option,it will load more names from database and display those names in the dropdownlist.But what I want is, when the user click on the more option ,dropdownlist will expand with the data from database without closing the dropdownlist.I have used ajax call to populate the dropdownlist from database.Currently when the user click on the more option ,the dropdownlist will close and again user want to click on the dropdownlist to see more options.Thanks in advance for the answers.

1

There are 1 answers

1
black_pottery_beauty On
<!DOCTYPE html>
<html>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showHideOther(){
    if (document.getElementById('drop_down').value == 'other') {

        $.get("xyz.php", function(data, status){
        $('#drop_down').attr('size',4+data.length);
        });


    }
}
</script>
<select name="" id="drop_down" onchange="showHideOther();">
        <option value="choose">Please choose</option>
        <option value="Allure">a</option>
        <option value="Elle">b</option>
        <option value="In-Style">c</option>
        <option value="other">More</option>
</select>
</body>
</html>