I have small problem.
I need select option from <select>
A, which triggered action and select his first <option>
in <select>
B by value from selected <option>
from A.
Everything works fine, but I can't select ONLY last optgroup and his option.
Try to look at jsfiddle
This bug seems to be only on Firefox (Linux, Win7). Google Chrome is ok. Any ideas?
Code (html):
<select id="charset" name="charset">
<option value=""></option>
<option value="armscii8">ARMSCII-8 Armenian</option>
<option value="ascii">US ASCII</option>
<option selected="selected" value="utf8">UTF-8 Unicode</option>
</select>
<select id="collation" name="collation">
<optgroup label="armscii8">
<option value="armscii8_bin">armscii8_bin</option>
<option value="armscii8_general_ci">armscii8_general_ci</option>
</optgroup>
<optgroup label="ascii">
<option value="ascii_bin">ascii_bin</option>
<option value="ascii_general_ci">ascii_general_ci</option>
</optgroup>
<optgroup label="utf8">
<option value="utf8_bin" selected="selected">utf8_bin</option>
<option value="utf8_czech_ci">utf8_czech_ci</option>
<option value="utf8_danish_ci">utf8_danish_ci</option>
<option value="utf8_esperanto_ci">utf8_esperanto_ci</option>
</optgroup>
</select>`
Code js:
(function($){
function setCollation(charset) {
$('#collation optgroup option').removeAttr('selected');
$('#collation optgroup').hide(0);
if (charset && charset != '') {
$("#collation optgroup[label='" + charset + "']").show(0);
$("#collation optgroup[label='" + charset + "'] option:first").attr('selected', 'selected');
}
}
$('#charset').change(function() {
setCollation($(this).val());
});
setCollation($('#charset').val());
})(jQuery);
I updated jsfiddle where I removed show/hide functions.
I will try to reproduce how script works:
When I select Collation from first select box (fe. value DOS Russin), second select is selected as I need.
I changed first select value to another one. In this moment is everything ok.
! I changed back to the DOS Russian and in this moment the second select box is not selected as in first step.
This is a very strange behavior and I can't to do works in FF.
Well I can't explain why the browser behavior is inconsistent but I can tell you that changing to .prop
seemed to have solved the problem.
$('#collation optgroup').prop('disabled', true);
$('#collation option').removeAttr('selected');
if (charset && charset != '') {
$("#collation optgroup[label='" + charset + "']").prop('disabled',false);
$("#collation optgroup[label='" + charset + "'] > option:eq(0)").prop('selected', true);
See it in action: