Ajax 与 Laravel Form Collective

Question

{!! Form::select('jobsList[]', $list_of_jobs, null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}

我有这个表格，我正在尝试异步加载 $list_of_jobs 与我正在做的事情相比。我对 LaravelCollective Form 的工作方式有点困惑。谁能指出我将如何通过它？我已经有 ajax 调用从控制器中获取 $list_of_jobs

Answer 1

//...
{!! Form::select('jobsList[]', [], null, ['id' => 'job', 'class' => 'form-control' 'multiple', 'style' => 'width: 60%; margin-top: 10px;', 'disabled'=>'disabled']) !!}
..//

使用 JQUERY、AJAX 填充您的选择框

<script>
    $(document).ready(function() {

            //Make an Ajax request to a Laravel route
            //This will return the data that we can add to our Select element.
            $.ajax({
                url: 'YOUR URL GOES HERE',
                type: 'get',
                success: function(data){

                    //Log the data to the console so that
                    //you can get a better view of what the script is returning.
                    console.log(data);

                    $.each(data, function(key, value){
                        //Use the Option() constructor to create a new HTMLOptionElement.
                        var option = new Option(key, value);
                        //Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
                        $(option).html(value);
                        //Append the option to our Select element.
                        $("#job").append(option);
                    });

                }
            });

        });
</script>

data 必须是对象数组[{}, {}, {}]

[
  {'key' : 'foo', 'value' => 'bar'}, 
  {'key' : 'kosksi', 'value' => 'makrouna'}, 
  {'key' : 'lablebi', 'value' => 'kafteji'}
]

更新

如果您想在填充选择框时设置选中的option(s)： 您需要在数据收集的每个对象中返回一个额外的属性selected : true|false

[
  {'key' : 'foo', 'value' : 'bar', 'selected' : false}, 
  {'key' : 'kosksi', 'value' : 'makrouna', 'selected' : false}, 
  {'key' : 'lablebi', 'value' : 'kafteji', 'selected' : true}
]

然后在success()ajax函数回调

//...
$.each(data, function(key, elem){
  //Use the Option() constructor to create a new HTMLOptionElement.            
  var option = new Option(elem.value, elem.key, false, elem.selected);
  //Convert the HTMLOptionElement into a JQuery object that can be used with the append method.
  $(option).html(elem.value);
  //Append the option to our Select element.
  $("#job").append(option);
});
//...