Question

我在Chrome中遇到过一个问题，我无法判断这是Chrome的错误，jQuery的错误，还是代码中的错误。我正在使用Chromium搜索未解决的问题，并且无法使用jQuery找到任何内容。我在这里创建了一个JSFiddle（并将包含以下代码用于后代）： http://jsfiddle.net/trmackenzie/cvPhd/4/

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

实际（适用于Windows和Mac的Chrome 21）：首次单击单选按钮时，仅选择最后一个所需选项，然后后续单击不会导致任何操作。如果选择列表中的特定选项，则仍会选中单选按钮。

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

请注意，选项上的“已选择”属性设置正确，但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');
    }
});

我是否遇到过一个错误或（更有可能）我在某处实施时遗漏了一些微妙的内容？

Answer 1

不要使用.removeProp（）!!除非您打算再也不要使用该物业。使用布尔值来设置它们

.prop('checked',true or false)

来自jQuery docs .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/

Answer 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，Chrome和“选定”属性异常

2 个答案: