不能选择多个值的Bootrap-Select

时间:2019-09-17 13:56:07

标签: jquery jquery-plugins bootstrap-select

我有一个模态输入如下:

       <div id="position_div" class="form-group row">
                    <label for="edit_jobs" class="col-4 col-form-label">Jobs</label>
                    <div class="col-8">
                        <select id="edit_jobs" name="jobs[]" class="form-control kt-selectpicker" data-live-search="true" multiple>
                            <option value="">Select Position</option>
                        </select>
                    </div>
                </div>

以及类似的脚本:

        $(document).on('click', '.edit-record', function (event) {
            event.preventDefault();
            edit_modal.modal('show');
            let edit_jobs = $("#edit_jobs");
            let url = $(this).attr('href');
            $.getJSON(url).done(function (data) {

                edit_modal.modal("show");
                let $data1 = data.date.split('-');
                let $date = $data1[2] + '/' + $data1[1] + '/' + $data1[0];

                let $data2 = data.until.split('-');
                let $until = $data2[2] + '/' + $data2[1] + '/' + $data2[0];

                let $company_id = data.company_id;
                console.log('company id:', $company_id);
                if ($company_id) {
                    $.ajax({
                        url: '/admin/interviews/position',
                        dataType: 'json',
                        type: 'POST',
                        data: {company_id: $company_id},
                        success: function (response) {
                            edit_jobs.empty(); // clear the current elements in select box
                            $.each(response, function () {
                                edit_jobs.append($('<option></option>').attr('value', this.id).text(this.title));
                            });
                            $('.kt-selectpicker').selectpicker('refresh');
                        }
                    });
                }

                let $jobs = data.jobs.split(',');

                $("#id").val(data.id);
                $("#csrf").val($csrf);
                $("#edit_user").val(data.user);
                $("#edit_venue").val(data.venue);
                $("#edit_date").val($date);
                $("#edit_until").val($until);
                $("#edit_company_id").val(data.company_id);
                $("#edit_remark").val(data.remark);

                edit_jobs.selectpicker('val', $jobs);
                edit_jobs.selectpicker('refresh');
            });
        });

我已经尝试了所有方法,但是不确定为什么不能选择select选项。 $ jobs是一个像[29, 30, 31, 38, 39]这样的ID数组,那么什么原因导致我无法选择它?

1 个答案:

答案 0 :(得分:1)

在您的Ajax内部尝试:

if ($company_id) {
                    $.ajax({
                        url: '/admin/interviews/position',
                        dataType: 'json',
                        type: 'POST',
                        data: {company_id: $company_id},
                        success: function (response) {
                            edit_jobs.empty(); // clear the current elements in select box
                            $.each(response, function () {
                                edit_jobs.append($('<option></option>').attr('value', this.id).text(this.title));
                            });

                            let result = data.jobs.split(',');
                            var $jobs = result.map(function (x) {
                                return parseInt(x, 10);
                            });

                            edit_jobs.val($jobs);
                            $('.kt-selectpicker').selectpicker('refresh');
                        }
                    });
                }