Menu
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?
821
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);
}
http://jsfiddle.net/cvPhd/7/
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
