jQuery，Chrome和“选定”属性异常 [英] jQuery, Chrome and "selected" attribute anomalies
问题描述
我在Chrome中遇到过一个问题，我无法分辨是Chrome的问题，还是jQuery的错误，还是代码中的错误。我已经通过Chromium搜索了开放问题，并且找不到任何东西，并且也使用jQuery。我在这里创建了一个JSFiddle（并且将包括下面的代码给后人）：
http： //jsfiddle.net/trmackenzie/cvPhd/4/
预期：
当我单击一个单选按钮时，指定的值被选中在选项列表中。此外，如果我点击列表中的特定选项，则取消选择所有单选按钮。
实际（在Chrome 21中，适用于Windows和Mac）：
只有第一次单击单选按钮时会选择最后所需的选项，然后后续点击不会发生任何事情。如果选择了列表中的特定选项，则单选按钮将保持选定状态。
实际值（在IE7,8,9和Firefox中）：
与预期值相同行为，例如正确的行为。
请注意，选项中的selected属性设置正确，但Chrome停止显示其状态。
下面是在jsFiddle中可用的代码：
<！DOCTYPE HTML>
< html>
< head>< title>测试< / title>< / head>
< body>
< option value =1>第一个< / option>
< option value =2>第二个< / option>
< option value =3>第三< / option>
< option value =4>第四< / option>
< option value =5>第五< / option>
< / select>
< span id =columnSpecList>
< input type =radioid =input1name =specvalue =1/>
< label for =input1>测试< / label>
< input type =radioid =input2name =specvalue =1,2/>
< label for =input2>测试< / label>
< input type =radioid =input3name =specvalue =1,2,3/>
< label for =input3>测试< / label>
< / span>
< / body>
< / html>
jQuery：
$（document）.ready（function（）{
var columnList = $（'＃testList_box'）;
var columnSpecList = $ （'#columnSpecList'）;
var columnSpecOptions = $（'input'，columnSpecList）;
$ b $（columnSpecOptions）.click（function（）{
var optionsToSelect = $ （this）.val（）。split（'，'）;
//清除列表
$（'：selected'，columnList）.removeProp（'selected'）;
//选择所需列
$（optionsToSelect）.each（function（index，value）{
$（'[value ='+ value +']'，columnList） .prop（'selected'，'true'）;
}）;
}）;
$（columnList）.on（
{
点击：deselectSpec，
change：deselectSpec
}
）;
//模拟所选选项的单击以加载初始值
var itemToClick = $（：checked，columnSpecList）;
$（itemToClick）.click（）;
函数deselectSpec（）{
$（columnSpecOptions）.removeProp（'checked'）;
））;
我碰到过错误还是更可能）我是否在某处执行了一些微妙的操作？解析方案
不要使用.removeProp（）！除非您计划再也不使用该物业。使用布尔值来设置它们ex
$ $ p $ $ $ c $ .prop（'checked'，true或false）
从jQuery文档 .removeProp 注意：不要使用此方法删除本机属性，如选中，禁用或选中。这将完全删除该属性，一旦删除，不能再添加到元素。使用.prop（）将这些属性设置为false。
您有
//清除列表
$（'：selected'，columnList）.removeProp（'selected'）;
//选择所需的列
$（optionsToSelect）.each（function（index，value）{
$（'[value ='+ value +']'，columnList ）.prop（'selected'，'true'）;
}）;
将其更改为
$（'：selected'，columnList）.prop（'selected'，false）;
//选择所需的列
$（optionsToSelect）.each（function（index，value）{
$（'[value ='+ value +']'，columnList ）.prop（'selected'，true）;
}）;
并且您有
函数deselectSpec（）{
$（columnSpecOptions）.removeProp（'checked'）;
}
更改为
函数deselectSpec（）{
$（columnSpecOptions）.prop（'checked'，false）;
}
I've come across an issue in Chrome and I can't tell if it's a bug with Chrome, a bug with jQuery, or an error in my code. I've search through open issues with Chromium and couldn't find anything and likewise with jQuery. I've created a JSFiddle here (and will include the code below for posterity): http://jsfiddle.net/trmackenzie/cvPhd/4/
Expected: When I click on a radio button, the indicated values are selected in the options list. Also, if I click a specific option in the list, all radio buttons are deselected.
Actual (in Chrome 21 for Windows and Mac): Only the last desired option is selected when clicking a radio button for the first time and then subsequent clicks causes nothing to happen. If a specific option in the list is chosen, a radio button remains selected.
Actual (in IE7,8,9 and Firefox): Same as expected behavior, e.g. correct behavior.
Note that the "selected" attribute on the option(s) is being set correctly but Chrome stops displaying its state.
Here is the code that is also available in 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>
The 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');
}
});
Have I come across a bug or (more likely) am I missing some subtlety in my implementation somewhere?
don't use .removeProp()!! unless you plan on never using the property again. Use boolean values to set them ex
.prop('checked',true or false)
From jQuery docs .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.
You had
// clear the list
$(':selected', columnList).removeProp('selected');
// select desired columns
$(optionsToSelect).each(function (index, value) {
$('[value=' + value + ']', columnList).prop('selected', 'true');
});
Change it to
$(':selected', columnList).prop('selected',false);
// select desired columns
$(optionsToSelect).each(function (index, value) {
$('[value=' + value + ']', columnList).prop('selected', true);
});
and you had
function deselectSpec() {
$(columnSpecOptions).removeProp('checked');
}
Change it to
function deselectSpec() {
$(columnSpecOptions).prop('checked',false);
}
这篇关于jQuery，Chrome和“选定”属性异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
