如何在具有HTML5和jquery中的动态数据的下拉列表中添加显示更多按钮

Question

我是网页设计的新手，我想在drop down列表中添加show more按钮。 但是我正在从数据库动态获取数据。

 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后将show more button下一条记录。

Answer 1

更改

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

至

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

希望这能解决您的问题

谢谢

Answer 2

试试下面的代码，它对我有用：

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

希望我能帮上忙

如何在具有HTML5和jquery中的动态数据的下拉列表中添加显示更多按钮

问题描述

2 个解决方案

解决方案1
0 2018-10-04 09:32:52

解决方案2
0 2018-10-04 21:01:33

如何在具有HTML5和jquery中的动态数据的下拉列表中添加显示更多按钮

问题描述

2 个解决方案

解决方案1 0 2018-10-04 09:32:52

解决方案2 0 2018-10-04 21:01:33

解决方案1
0 2018-10-04 09:32:52

解决方案2
0 2018-10-04 21:01:33