选择下拉菜单停留在引导模式上

Question

我有一个输入，当更改时，会进行一些验证，最终会使用模式显示通知。

问题在于，如果在同一页面上有一个选择并且通过单击选择触发输入的“onChange”，则选择的下拉菜单会呈现在模式上并且不会像它一样被“隐藏”在这个小提琴上可以看到：http://jsfiddle.net/GSqvB/

HTML 代码是：

<div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">×</a>
        <h3>Modal Heading</h3>
     </div>
     <div class="modal-body">
         <p>One fine body…</p>
     </div>
     <div class="modal-footer">
         <a href="#" class="btn primary">Primary</a>
         <a href="#" class="btn secondary">Secondary</a>
     </div>
 </div>

 <span>Write someting then click the select <input type="text" id="inputToChange">     </input></span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><span>Click me after filling the input <select><option value="1">This</option><option value="2">should</option> <option value="3">be</option><option value="4">hidden</option></select><span>

模态是这样启动的：

var $modal = $('#modal-from-dom');
$modal.modal({backdrop: true, keyboard: true, show: false});
$('#inputToChange').on('change', function(event) {
    $modal.modal('show');
});

要模拟行为，您必须在输入上写一些内容，然后单击选择。

如果我隐藏选择并在模式关闭时显示它，它可以工作，但这似乎是一个非常丑陋的解决方法。

有没有办法让选择“关闭”或至少留在模式后面？

Answer 1

显示模态后，尝试隐藏和显示<select> 元素。看到这个小提琴： http://jsfiddle.net/ZTBGA/4/

$modal.modal('show');
    $("#input2").hide();
    setTimeout(function() {
        $("#input2").show();
    }, 5);

编辑：“有没有办法让选择“关闭”或至少留在模态框后面？”

.blur() 可能适用于某些浏览器，但不适用于 Chrome。上述解决方案适用于所有人。