Jquery MultiSelect Dropdown is not working correctly with data from Ajax call

Question

I am using a multiselect dropdown to have a checkbox and Search functionality. I have added all the required libraries. But the dropdown is not showing correctly. The data is displayed as radio buttons instead of check box. And Selecting any value is not shown. Please find my code below:

<head>
<link rel="stylesheet"
    href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script type="text/javascript" src="/resources/js/app.js"></script>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fileList').change(function() {
            var end = this.value;
            alert("Value:" + end);
            $.ajax({
                type: "POST",
                url: 'getColumns',
                data : {
                    end
                  },
                dataType: 'json',
                success: function (response) {
                    alert('something'+response+"="+response.length);
                    alert('res'+response[0]);

                   for(var i = 0; i<response.length; i++){
                        var id = response[i];           
                        $("#columnList").append("<option value=''>"+id+"</option>");
                    }
                   $('#columnList').multiselect({
                        includeSelectAllOption: true,
                        buttonWidth: 500,
                        enableFiltering: true
                    });
                },
                error: function() {
                    alert('fail');
                }
            }); 
        });

    });
</script>

HTML code for Select Element

<div class="row">                       
                        <div class="col-sm-12 form-group wow fadeInDown"
                            data-wow-delay="700ms" data-wow-duration="1000ms">
                            <div class="input-group">
                                <span class="input-group-addon"><span
                                    class="glyphicon glyphicon-file"></span></span> <select
                                    class="form-control" name="columnList" id="columnList">
                                    <option value="" hidden>Select Segment Name</option>
                                </select>
                            </div>
                        </div>
                    </div>

I am Expecting Output like this.

sree · Accepted Answer · 2018-06-05 15:27:23Z

1

I hope you have to change your option value code in your jquery. try modifying your code like below:

$("#columnList").append("<option value="+id+">"+value+"</option>");

Also, try to check the class for showing checkbox

answered Jun 5, 2018 at 15:27

sree

3891 gold badge5 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Jquery MultiSelect Dropdown is not working correctly with data from Ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related