个人中心
gpt4 book ai didi

jQuery、Chrome和 "selected"属性异常

转载 作者：行者123 更新时间：2023-11-30 23:55:59 24 4
gpt4 key购买 nike

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

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

最佳答案

不要使用.removeProp()!!除非您打算不再使用该特性。使用 bool 值设置它们例如

.prop('checked',true or false)

来自 jQuery 文档 .removeProp

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

你有

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

关于jQuery、Chrome和 "selected"属性异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12203767/

24 4 0
文章推荐： python - Twisted - 该代码是否应该在单独的线程中运行
文章推荐： python - 有没有办法从 epydoc 生成中排除特定文件？
文章推荐： jquery清除除一个之外的所有输入字段的值
文章推荐： jquery - 使用循环优化 Jquery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com