Question

代码在这里：

请在所有浏览器的最新版本上运行，并亲自查看。单击按钮时，在：

（当然还有Safari）它不会选择任何内容，而是创建一些幽灵空的选项
在Firefox和Opera上，它以我期望的方式工作，并希望它能够工作，取消选择所有选项
在Internet Explorer上，它什么都不做

那么，哪一个是预期的行为？

Answer 1

如果你看看jQuery 1.5.1源代码行1970，你会看到：

// Treat null/undefined as ""; convert numbers to string
if ( val == null ) {
    val = "";

所以预期的行为与将空字符串作为参数一样。

如果你继续排队1984，你会看到：

} else if ( jQuery.nodeName( this, "select" ) ) {
  var values = jQuery.makeArray(val);

  jQuery( "option", this ).each(function() {
    this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0;
  });
  if ( !values.length ) {
   this.selectedIndex = -1;
  }

所以预期的行为是：

如果option的字符串值为空，请选择该值。
如果未设置selectedIndex = -1

从此处开始，浏览器可以确定selectedIndex设置为-1时的操作

看msdn library它说：

selectedIndex属性返回-1 如果选择对象不包含任何选定的项目。设置 selectedIndex属性清除任何现有的选定项目。

因此，预期的行为似乎是取消选择所有选项

同样适用于MDC documentation以及firefox，它们非常清楚

返回当前的索引选定的项目。您可以选择一个项目通过为其分配索引属性。通过为此分配-1 物业，所有物品都将取消选择。

基于webkit的浏览器似乎对事物有不同的看法。

如果你谷歌“webkit selectedIndex”你会看到很多关于选择标签的错误报告，所以也许它只是时髦;）

想想看，这是jQuery中的一个错误，因为它是一个应该能够在浏览器中表现相同的库 - 应该报告;）

Answer 2

哪一个是预期的行为？

jQuery的val()函数是documented来获取字符串值或字符串值数组，因此没有定义的行为。

尝试val([])选择任何内容，或使用defaultSelected属性恢复原始值：

$('#select option').each(function() {
    this.selected= this.defaultSelected;
});

Answer 3

我将你的jsfiddle与我认为可以帮助你的人分开： http://jsfiddle.net/marcosfromero/AYLrT/

我在IE，Firefox和Chrome中测试了它

jQuery("#button").click(function(event){
    var select = jQuery("#select");
    // Button click will try to find a "none" option (with no value)
    if(select.find('option.none').length===0) {
        // If it's not found, it creates the option
        select.prepend('<option value="" class="none"></option>');   
    }
    // And then it selects it
    select.val('');
});

// When select value is changed...
jQuery('#select').change(function() {
    var me = $(this);
    // ... to something different than empty ("")...
    if(me.val() !== '') {
        //... it removes that option
        me.find('option.none').remove();   
    }
});

Answer 4

这些行为都不合理。在Chrome中，它是有道理的，因为您将值设置为空，因此它不显示任何内容。在IE中，它是有意义的，因为您没有更改为有效值，因此它不会改变任何内容。

如果您希望所有浏览器都像Firefox一样，只需将值设置为1。

jQuery（formElement）.val（null）：不同浏览器中的结果不一致

4 个答案: