4

我在 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');
    }
});​

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

4

2 回答 2

10

不要使用 .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/

于 2012-08-30T19:14:16.603 回答
0

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

编辑：固定代码

于 2012-08-30T19:15:58.177 回答