Ajax 搜索未检索下拉值

Question

我正在使用 Chosen.js 插件进行下拉搜索，我在其中成功获取数据并将其保存到数据库，但我无法使用Ajax 搜索。

我尝试在 success 函数中初始化 selected 但没有成功，没有给出任何输出，但是当我提醒响应它正在工作时。

<script>
  $(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
  $('#search').on('keydown', function(e) {
    if(e.which == 13){
    var sid = $("#search").val();
      $.ajax({
                  url: '{{ URL::to('search-data/')}}'+"/"+ sid,
                  type: "Get",
                  dataType: 'json',
                   success: function(response){
                  $("#mob").val(response.mobile);//Working 
                  $("#car").chosen().val(response.car_name);//Not Working
                  $("#car").val(response.car_name);//Not Working
                  //alert(response.car_name);//Working but in alert only
                 }
                });
            }
    });
     });
</script>

HTML:

<div>
<label for="car">Car Name</label>
  <select class="form-control select-box" name="car" id="car">
    <option>Select Car</option>
  </select>
</div >

我想将保存的下拉值检索到其各自的字段。

Answer 1

您需要将 options 附加到您的 select 框，然后触发 updated 以便所选的 select-box 获得更新的更改。工作示例：

//Suppose you need to append below variable
var response_car_name="abcd";
//append the option and then use trigger event to update select box
   $("#car").chosen().append("<option>"+response_car_name+"</option").trigger("chosen:updated");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">


<div>
<label for="car">Car Name</label>
  <select name="brand"  id="car"class="form-control select-box " name="car" >
    <option>Select Car</option>
  </select>
</div >

Ajax 搜索未检索下拉值

Ajax search not retrieving dropdown values

ajax

jquery

jquery-chosen