jQuery、Chrome 和“选定”属性异常答案

【问题标题】：jQuery, Chrome and "selected" attribute anomaliesjQuery、Chrome 和“选定”属性异常
【发布时间】：2012-08-30 19:06:06
【问题描述】：

我在 Chrome 中遇到了一个问题，我不知道这是 Chrome 的错误、jQuery 的错误还是我的代码中的错误。我搜索了 Chromium 的未解决问题，但找不到任何东西，同样使用 jQuery。我在这里创建了一个 JSFiddle（并将包括下面的代码以供后代使用）： http://jsfiddle.net/trmackenzie/cvPhd/4/

预期：当我单击单选按钮时，会在选项列表中选择指示的值。此外，如果我单击列表中的特定选项，所有单选按钮都会被取消选择。

实际（在适用于 Windows 和 Mac 的 Chrome 21 中）：第一次单击单选按钮时，仅选择最后一个所需的选项，然后随后的单击不会导致任何事情发生。如果选择了列表中的特定选项，则单选按钮保持选中状态。

实际（在 IE7、8、9 和 Firefox 中）：与预期行为相同，例如正确的行为。

请注意，选项上的“selected”属性设置正确，但 Chrome 停止显示其状态。

这里是 jsFiddle 中也可用的代码：

<!DOCTYPE HTML>
<html>
<head><title>Testing</title></head>
<body>
    <select size="10" name="testList" multiple="multiple" id="testList_box" style="width:250px; float:left; margin-right:20px;">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
        <option value="5">Fifth</option>
    </select>
    <span id="columnSpecList">
        <input type="radio" id="input1" name="spec" value="1" />
            <label for="input1">Testing</label>
        <input type="radio" id="input2" name="spec" value="1,2" />
            <label for="input2">Testing</label>
        <input type="radio" id="input3" name="spec" value="1,2,3" />
            <label for="input3">Testing</label>
    </span>
</body>
</html>

jQuery：

$(document).ready(function () {
var columnList = $('#testList_box');
var columnSpecList = $('#columnSpecList');
var columnSpecOptions = $('input', columnSpecList);

    $(columnSpecOptions).click(function () {
        var optionsToSelect = $(this).val().split(',');

        // clear the list
        $(':selected', columnList).removeProp('selected');

        // select desired columns
        $(optionsToSelect).each(function (index, value) {
            $('[value=' + value + ']', columnList).prop('selected', 'true');
        });
    });

    $(columnList).on(
        {
            click: deselectSpec,
            change: deselectSpec
        }
    );

    // simulate "click" of the selected option to load the initial values
    var itemToClick = $(":checked", columnSpecList);
    $(itemToClick).click();

    function deselectSpec() {
        $(columnSpecOptions).removeProp('checked');
    }
});

我是否遇到了错误，或者（更有可能）我在某个地方的实现中遗漏了一些微妙之处？

【问题讨论】：

标签： jquery google-chrome

【解决方案1】：

不要使用 .removeProp()！！除非您打算不再使用该物业。使用布尔值将它们设置为 ex

.prop('checked',true or false)

来自 jQuery 文档.removeProp

注意：请勿使用此方法删除本机属性，例如选中、禁用或选中。这将完全删除该属性，并且一旦删除，就不能再次将其添加到元素中。使用 .prop() 将这些属性设置为 false。

你有

// clear the list
$(':selected', columnList).removeProp('selected');

 // select desired columns
 $(optionsToSelect).each(function (index, value) {
       $('[value=' + value + ']', columnList).prop('selected', 'true');
 });

改成

$(':selected', columnList).prop('selected',false);

 // select desired columns
 $(optionsToSelect).each(function (index, value) {
      $('[value=' + value + ']', columnList).prop('selected', true);
  });

你有

function deselectSpec() {
    $(columnSpecOptions).removeProp('checked');
}

改成

function deselectSpec() {
     $(columnSpecOptions).prop('checked',false);
}

http://jsfiddle.net/cvPhd/7/

【讨论】：

叹息...很明显，我再次陷入了属性和属性之间的区别（以及何时删除它们以及何时不删除它们）。谢谢！
不客气。不久前我已经切换了..它实际上更有意义:)
我是不是要疯了，还是以前不必使用 removeProp？ jQuery 有变化吗？
自 jQuery 1.6 以来，他们引入了 .prop() ，它是用于设置/获取属性值的首选方法，例如选择/检查....prop(property,true/false) 是设置属性值的正确方法. .removeProp() 将从元素中删除该属性，您将无法再使用该属性。我相信您在谈论.removeAttr()？
是的，也许，无论如何都要上船！

【解决方案2】：

我使用 attr() 和 removeAttr() 方法代替了 removeProp() 和 prop()，一切正常。

$(document).ready(function () {
        var columnList = $('#testList_box');
        var columnSpecList = $('#columnSpecList');
        var columnSpecOptions = $('input', columnSpecList);

        $(columnSpecOptions).click(function () {
            var optionsToSelect = $(this).val().split(',');

            // clear the list
            $(columnList).find('option').removeAttr('selected');

            // select desired columns
            $(optionsToSelect).each(function (index, value) {
                $('[value=' + value + ']', columnList).attr('selected', 'selected');
            });
        });

        $(columnList).on(
            {
                click: deselectSpec,
                change: deselectSpec
            }
        );

        // simulate "click" of the selected option to load the initial values
        var itemToClick = $(":checked", columnSpecList);
        $(itemToClick).click();

        function deselectSpec() {
            $(columnSpecOptions).removeProp('checked');
        }
    });

编辑：固定代码

【讨论】：

在处理“选定”状态时，我知道您想要处理属性而不是属性。 jQuery 对此有点宽容（它会处理进行适当的更改），但修改属性更快、更合适。请参阅 ejohn.org/blog/jquery-16-and-attr 上 John Resig 的旧解释。但是，根据 Wiley 的观点，我不应该删除该属性，而应该将其设置为 false。
不知道。谢谢你的链接。