Я использую выпадающий список с несколькими вариантами, чтобы установить флажок и функцию поиска.Я добавил все необходимые библиотеки.Но выпадающий не отображается правильно.Данные отображаются в виде переключателей вместо флажка.И при выборе любого значения не отображается.Пожалуйста, найдите мой код ниже:
<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-код для выбранного элемента
<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>
Я ожидаю выхода, как это.
Я надеюсь, что вы должны изменить свой код значения опции в вашем jquery.попробуйте изменить свой код, как показано ниже:
$("#columnList").append("<option value="+id+">"+value+"</option>");
Также попробуйте проверить класс на наличие флажка