jQuery、Chrome和"；精选；属性异常_Jquery_Google Chrome

jQuery、Chrome和"；精选；属性异常

jquery google-chrome

jQuery、Chrome和"；精选；属性异常,jquery,google-chrome,Jquery,Google Chrome,我在Chrome中遇到了一个问题，我不知道这是Chrome的错误，jQuery的错误，还是代码中的错误。我用Chromium搜索了所有未解决的问题，但找不到任何东西，jQuery也是如此。我在这里创建了一个JSFIDLE（并将为后代提供下面的代码）：预期：单击单选按钮时，在选项列表中选择指示的值。此外，如果单击列表中的特定选项，则会取消选择所有单选按钮实际（在适用于Windows和Mac的Chrome 21中）：第一次单击单选按钮时，仅选择最后一个所需选项，随后的单击不会导致任何情况发

我在Chrome中遇到了一个问题，我不知道这是Chrome的错误，jQuery的错误，还是代码中的错误。我用Chromium搜索了所有未解决的问题，但找不到任何东西，jQuery也是如此。我在这里创建了一个JSFIDLE（并将为后代提供下面的代码）：

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

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

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

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

以下是JSFIDLE中也提供的代码：

<!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>

我是否遇到了一个bug，或者（更有可能）我在实现中遗漏了一些细微之处？

不要使用.removeProp（）！！除非你打算再也不使用该房产。使用布尔值来设置它们

.prop('checked',true or false)

来自jQuery文档

注意：不要使用此方法删除本机属性，例如已选中、已禁用或已选择。这将完全删除该属性，一旦删除，就不能再次添加到元素中。使用.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);
}

我使用了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');
        }
    });

编辑：修复代码

叹气……显然，我又一次沦为属性和属性之间区别的牺牲品（以及何时删除和何时不删除）。谢谢不客气。我不久前就换了。。这实际上更有意义：）我是疯了，还是以前不需要使用removeProp？jQuery中有变化吗？自从jQuery1.6引入.prop（）以来，它是设置/获取属性值的首选方法，如select/checked

.prop（属性，真/假）

是设置属性值的正确方法

.removeProp（）

将从元素中删除该属性，您将无法再使用该属性。。我相信你说的是

.removeAttr（）

？是的，也许吧，祝你一切顺利！当处理“选定”状态时，我知道您希望处理属性而不是属性。jQuery在这方面有些宽容（它处理适当的更改），但修改属性更快更合适。请参阅John Resig的旧解释。但是，根据wirey的观点，我不应该删除该属性，而是应该将其设置为false。我不知道这一点。谢谢你的链接。

$(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');
        }
    });