Как добавить кнопку «Показать больше» в раскрывающемся списке с динамическими данными в HTML5 и jquery - PullRequest
Новая
       0

Как добавить кнопку «Показать больше» в раскрывающемся списке с динамическими данными в HTML5 и jquery

0 голосов
/ 04 октября 2018

Я новичок в веб-дизайне, хочу добавить кнопку show more в список drop down.Но я получаю данные динамически из базы данных. 

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>

В выпадающем списке я хочу показать first 10 records следующие записи будут отображаться после show more button клика.

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

попробуйте этот код, у меня это сработало: 

<!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>

Надеюсь, я помог

0 голосов
/ 04 октября 2018

изменить 

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

на 

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

Надеюсь, что это решит вашу проблему

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...