【问题标题】：Show modal loose my <select> style with chosen显示模态松散我的 <select> 样式与选择
【发布时间】：2014-04-19 14:30:51
【问题描述】：

问题一：

我像这篇文章Dynamically load information to Twitter Bootstrap modal 一样动态加载模态窗口。除了<select>，所有的工作都像一个魅力。我选择了Chosen。菜单出现，但未使用 Chosen 设置样式。

问题2：

在下面的代码中（由 jQuery 加载模态内容），我需要再次插入我的脚本文件 (*.js)，而它们已经包含在我的索引页面中...

我的 index.php HTML 代码：

<div id="modal-user-infos" class="modal fade" role="dialog" aria-hidden="true">
  <div class="modal-dialog" id="modal-user-infos-content"></div>
</div>
[...]
all my scripts
[...]

我的JS调用modal：

$(".edit-item").click(function() {   
        var item_id  = $(this).attr('data-id');
        var modal_id = $(this).attr('data-modal');
        $.ajax({
            cache: false,
            type: 'POST',
            url: 'assets/php/inc/modal/'+modal_id+'.php',
            data: 'item_id='+item_id,
            success: function(data) 
            {
                $('#modal-'+modal_id).modal('show');
                $('#modal-'+modal_id+'-content').show().html(data);
            }
        });
});

我的模态内容由 jQuery 加载：

<div class="modal-content">
  <div class="modal-header text-center">
    <h2 class="modal-title">Informations</h2>
  </div>
  <div class="modal-body">
    <form id="update-user-info" action="assets/php/ajax/update-user-info.php" class="form-horizontal form-bordered">
      <select name="USR_Language" class="select-chosen" data-placeholder="Choose a language...">
        <option value="en-US">Anglais</option>
        <option value="es-ES">Espagnol</option>
        <option value="fr-CA">Français</option>
      </select>
      <div class="form-group form-actions">
        <div class="col-xs-6 text-right">
          <button type="submit" class="btn btn-sm btn-primary">Save Changes</button>
          <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </form>
  </div>
</div>

【问题讨论】：

您的问题解决了吗？

标签： jquery twitter-bootstrap select

【解决方案1】：

我认为你应该尝试类似的方法：

问题 1：

$(".edit-item").click(function() {   
        var item_id  = $(this).attr('data-id');
        var modal_id = $(this).attr('data-modal');
        $.ajax({
            cache: false,
            type: 'POST',
            url: 'assets/php/inc/modal/'+modal_id+'.php',
            data: 'item_id='+item_id,
            success: function(data) 
            {
                $('#modal-'+modal_id).modal('show');
                $('#modal-'+modal_id+'-content').show().html(data);
                $('#update-user-info select').chosen();  // <--- HERE
            }
        });
});

问题 2：

我认为你不能，它已经插入了，所以只需调用一个函数。

【讨论】：

【解决方案2】：

https://github.com/alxlit/bootstrap-chosen

【讨论】：