用选择的</select>显示模态松散的<select>样式

时间:2014-03-14 10:37:10

标签: jquery twitter-bootstrap select

问题1:

我动态加载模态窗口,就像在这篇文章Dynamically load information to Twitter Bootstrap modal中一样。除了<select>之外,所有的作品都像魅力一样。我选择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调用模态:

$(".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>

2 个答案:

答案 0 :(得分:0)

我认为你应该尝试类似的事情:

问题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:

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

答案 1 :(得分:0)

https://github.com/alxlit/bootstrap-chosen&lt;试试这个。它可以更好地与BS3和Chosen集成。