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 — Hazaaa
– Hazaaa, Commented Oct 4, 2018 at 9:03

Vijaya Varma Lanke · Accepted Answer · 2018-10-04 09:32:52Z

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 4, 2018 at 9:32

Vijaya Varma Lanke

6312 gold badges7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vijaya Varma Lanke Over a year ago

@Durga u want to add show more text as first next database values right? once check here stackoverflow.com/questions/18733545/…

Durga Over a year ago

No after getting database values it show only 10 records after click on show more in drop down it will show remaining records.

Vijaya Varma Lanke Over a year ago

@Durga once check with this code <select name="select1" onmousedown="if(this.options.length>10){this.size=10;}" onchange='this.size=0;' onblur="this.size=0;"> . If u r records length is greater than 10, it'll show upto 10 values only if user want to see more he/she can drag and see. Thank you

tomer raitz · Accepted Answer · 2018-10-04 21:01:33Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related