为什么我的选择标签在Firefox和IE中无法正确显示？

使用Jquery，我希望能够动态填充一个可能已经有值的选择字段。填充后，如果它作为新字段中的选项存在，我希望将选择标记的值设置为先前值。我可以在Chrome中完成此操作，但在Internet Explorer和Firefox中，我遇到了不同的意外行为。这个问题的描述，一些示例代码以及一个带有示例代码的JSFiddle的链接。为什么我的选择标签在Firefox和IE中无法正确显示？

在Firefox中，如果用户仅选中该字段，它将按预期工作。如果用户单击该字段，则内容和值将按照预期进行更新，但如果在用户单击下拉列表中的某个项目之前该字段失去焦点（由于上一个值仍然可以突出显示，用户不会这么做），该值将更新为选择标签中的最顶层选项。

在IE中，当用户点击该字段时，javascript会触发，我相信会更新DOM，但直到字段丢失焦点后才会显示更改的结果。因此，显示给用户的下拉菜单是现在删除的选项，而不是新添加的选项。如果选择标签在没有用户选择选项的情况下失去焦点，它将按预期工作（但如果用户再次单击它，则下拉列表中的字体将神奇地更改为衬线。如果您可以告诉我为什么会发生这种情况，则为奖励点）。

我想知道我的代码是否有问题，或者我的问题是由浏览器中的错误（或功能）引起的。

<p> 
    <select> 
     <option value='aaa'>aaa</option> 
     <option value='bbb' selected="selected">bbb</option> 
    </select> 
</p> 

<script> 
    $(document).ready(function() { 
     var newOpts = "<option value='ccc'>ccc</option><option value='ddd'>ddd</option><option value='bbb'>bbb</option>"; 

     var $select = $("select"); 
     var selectedOpt = $select.val(); 

     $select.focus(function() { 
      $select 
       .empty() 
       .append(newOpts) 
       .val(selectedOpt); 
     }); 
    }); 
</script>

I have the above in JSFiddle here.

类似的jsfiddle例如exists here，每个被点击的选择标记时明确地显示附加选择。

任何帮助将不胜感激。

来源

2014-11-21 anthonybrice

select元素的事件处理因浏览器而异。

一个稍微哈克溶液，这似乎工作一致地跨浏览器，是模拟上聚焦打开选择元件，然后关闭它上模糊：

var newOpts = "<option value='ccc'>ccc</option><option value='ddd'>ddd</option><option value='bbb'>bbb</option>"; 
 

 
var $select = $("select"); 
 
var selectedOpt = $select.val(); 
 

 
$select.focus(function() { 
 
    if(!$(this)[0].size) { 
 
    $(this) 
 
     .empty() 
 
     .append(newOpts) 
 
     .val(selectedOpt) 
 
    $(this)[0].size= $(this)[0].options.length; 
 
    
 
    } 
 
}); 
 

 
$select.on('change blur', function() { 
 
    $(this)[0].size= 0; 
 
});

select { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span style="position:relative;width:4em;float:left"> 
 
    &nbsp; 
 
    <select> 
 
    <option value='aaa'>aaa</option> 
 
    <option value='bbb' selected="selected">bbb</option> 
 
    </select> 
 
</span> 
 
<input> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

来源

2014-11-21 22:27:05

非常感谢你。不要挑剔，但你知道我该如何维护选择标签的默认行为：将下拉列表呈现为弹出式窗口，而不是像以前那样调整整个标签的大小？ – anthonybrice 2014-11-24 18:40:03

根本不挑剔！我已经更新了代码，现在将绝对定位的'select'放入相对定位的'span'中。我必须给跨度一个宽度，这只有在我添加了非定位内容时才起作用（在这种情况下，是一个不间断的空间）。一个真正的kludge-and-a-hack，但肯定比引起* all *内容的回流更好。 – 2014-11-24 18:57:33

最后一个问题。通常在选择标签打开后，单击一个选项或用箭头键突出显示一个选项并按回车键关闭标签。我可以在这里保留这个功能吗？我尝试添加处理程序到焦点和点击事件，检查标记的大小，如果它不是零调用模糊，但我不能让它以任何方式工作。 [这是我的小提琴。]（http://jsfiddle.net/bzfr2up3/3/）再次感谢您的帮助！ – anthonybrice 2014-11-24 19:35:37

.VAL（）不适合选择。取而代之的是，得到这样的选择选项的文本：

var Selected = $("select option:selected").text();

然后，一旦你已经取代了选择的选项，这样做：

$("select option").each(function() { 
    if ($(this).text() == Selected) { 
     $(this).attr("selected", "selected"); 
    } 
});

来源

2014-11-21 23:19:16 Redit0

为什么我的选择标签在Firefox和IE中无法正确显示？

回答

相关问题