How to add show more button in drop-down list with dynamic data in HTML5 and jquery

Question

I am new to web designing, i want to add show more button in drop down list. But i am getting data dynamically from database.

var $selectdropdrown = $('#dropdrown');
$.getJSON('/listofData', function(data1) {
  $selectdropdrown.html('');
  $selectdropdrown.append('<option>' + "--Select--" + '</option>');
  $.each(data1.data, function(key, val) {
    $selectdropdrown.append('<option id=' + val.id + '>' + val.name + '</option>');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-5 control-label">Select Area Name <span class="mandatory"></span></label>
  <div class="col-sm-7">
    <select class="form-control" id="dropdrown" name="dropdrown"></select>
  </div>
</div>

In drop down i want to show first 10 records next records will show after show more button click.

I think your answer is here [how-to-dynamically-add-options-to-an-existing-select-in-vanilla-javascript](https://stackoverflow.com/questions/17730621/how-to-dynamically-add-options-to-an-existing-select-in-vanilla-javascript) — Hazaaa, Oct 04 '18 at 09:03

score 0 · Answer 1 · answered Oct 04 '18 at 09:32

0

change

<select class="form-control" id="dropdrown" name="dropdrown"></select>

to

<select class="form-control" id="dropdrown" name="dropdrown">
<option value="0">Show more</option>
</select>

Hope this will resolve u r issue

Thank you

answered Oct 04 '18 at 09:32

Vijaya Varma Lanke

603
2
7
19

@Durga u want to add show more text as first next database values right? once check here https://stackoverflow.com/questions/18733545/selected-value-get-from-db-into-dropdown-select-box-option-using-php-mysql-error – Vijaya Varma Lanke Oct 04 '18 at 10:37
No after getting database values it show only 10 records after click on show more in drop down it will show remaining records. – Durga Oct 04 '18 at 10:46
@Durga once check with this code – Vijaya Varma Lanke Oct 04 '18 at 11:21

score 0 · Answer 2 · answered Oct 04 '18 at 21:01

try this code, it worked for me:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body >
<div class="form-group">
  <label class="col-sm-5 control-label">Select Area Name <span class="mandatory"></span></label>
   <div id="thisID" class="col-sm-7">
     <select class="form-control" id="dropdrown"  name="dropdrown"></select><br><br>
   </div>
</div>

    <script>

    $('#thisID').ready(function(){
        $.getJSON('listofData.json', function(result){
            var counter = 0;
            var input =  $('<input id="more" type="button" value="For More detelis" style="display : none"><br><Br>');
            $("#thisID").append(input);
            var select =  $('<select class="form-control" id="dropdrown2"  name="dropdrown" style="display : none"></select>');
            $("#thisID").append(select);
            $.each(result, function(i, field){
                localStorage.setItem('length', result.length);
                if(counter<10 && counter< result.length){
                    $("#dropdrown").append('<option id='+field.id+'>'+field.name+'</option>');
                    counter++
                }
                else

                    $("#dropdrown2").append('<option id='+field.id+'>'+field.name+'</option>');

            });
                if( localStorage.getItem('length') > 10 ) {
                        input.show();
                    }
                input.click(function()
                    {
                        select.show()
                    });

        });
    });


</script>
</body>
</html>

Hope I helped

How to add show more button in drop-down list with dynamic data in HTML5 and jquery

2 Answers2