Question

我有一个内部带有select2下拉菜单的Bootstrap模式：

<div class="modal fade" id="modal_form" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            ...
            <div class="form-group">
                 <label class="control-label col-md-3">Artist</label>
                 <div class="col-md-9">
                    <select name="artist" class="form-control" id="dropartist"></select>
                    <span class="help-block"></span>
                </div>
            </div>

bootrap调用来设置下拉菜单时的功能：

$('#modal_form').on('shown.bs.modal', function () {
  console.log("OK");
  $.ajax({
    type: "POST",
    //data: {dropartist: dropartist},
    url: 'Manage/get_artists',
    dataType: 'json',
    success: function(response) {
      var $el = $("#dropartist");
      $el.empty(); // remove old options
      var len = response.length;
      for( var i = 0; i<len; i++){

        var id = response[i]['id'];
        var name = response[i]['name'];

        $el.append("<option value='"+id+"'>"+name+"</option>");
      }
    }
  });
});

将数据加载到Bootstrap的功能：

function edit(id){
  save_method = 'update';
  $('#form')[0].reset(); // reset form on modals
  $('.form-group').removeClass('has-error'); // clear error class
  $('.help-block').empty(); // clear error string    
  //Ajax Load data to modal
  $.ajax({
    url : "<?php echo base_url('Manage/edit')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {

      $('[name="id"]').val(data.id);
      $('[name="name"]').val(data.name);
      $("#dropartist").val(data.artistid).trigger("change"); //select dropdown default 
      $('[name="reason"]').val(data.reason);
      $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
      $('.modal-title').text('Edit Artist'); // Set title to Bootstrap modal title

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
      alert('Error get data from ajax');
    }
  });
}

我尝试选择下拉菜单，但这是行不通的。我该如何解决这个问题？非常感谢您的时间和协助。

Answer 1

您的选择为空，没有可供选择的项目。因此，首先要更新选择内容时，必须插入<options></options>而不设置值。因此，基本上data.artistid（或另一个变量）必须包含这样的html字符串

<option value="value-1" selected="selected">Name</option>
<option value="value-2">Name</option>
<option value="value-3">Name</option>

然后您必须将jQuery更改为

$("#dropartist").html(data.artistid);

之后，您可以更改所选项目。

Answer 2

修复，我得到了所有下拉值，并在我的php控制器内选择了正确的值，并通过ajax传递给bootrap模态。由于@KHansen的意见。

如何在引导模态中选择默认下拉值select2？

2 个答案: