时间戳

首页 > 解决方案 > 如何在引导模式中选择默认下拉值 select2？

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

问题描述

我有一个 Bootstrap 模式，里面有一个 select2 下拉菜单：

<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');
    }
  });
}

我尝试选择下拉菜单，但它不起作用。我该如何解决这个问题？非常感谢您在这件事上的时间和帮助。

标签： javascriptjquerybootstrap-modaljquery-select2

解决方案

您的 Select 为空，没有可供选择的项目。因此，首先，当您要更新选择时，您必须插入<options></options>而不是设置值。所以基本上data.artistid（或另一个var）必须包含一个像这样的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);

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

推荐阅读