jQuery、Chrome 和“selected”属性异常

2024-02-24

我在 Chrome 中遇到了一个问题，但我无法判断这是 Chrome 的错误、jQuery 的错误还是我的代码中的错误。我搜索了 Chromium 的未解决问题，但找不到任何内容，jQuery 也是如此。我在这里创建了一个 JSFiddle（并将包含以下代码供后代使用）：http://jsfiddle.net/trmackenzie/cvPhd/4/ 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');
    }
});

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

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

.prop('checked',true or false)

来自 jQuery 文档.removeProp http://api.jquery.com/removeProp/

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

You had

// 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/ http://jsfiddle.net/cvPhd/7/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery、Chrome 和“selected”属性异常

jQuery

Googlechrome