Multiple Dropdowns causes issue on FIREFOX if options are disabled
Suppose we have 2 dropdowns on the page
<div>1st dropdown</div>
<select id="1" class="DROPDOWN">
<option>1</option>
<option>2</option>
</select>
<div>2nd dropdown</div>
<select id="2" class="DROPDOWN">
<option>3</option>
<option>4</option>
</select>
<div id="aj" value=""></div>
Now i have written a javascript code which will disable the selected option tag when any of these dropdowns are changed.
$(document).on('change', '.DROPDOWN', function (event) {
var value = $(this).val();
$(this).find(":selected").attr('disabled','disabled');
$("#aj").html(value);
});
Now there is a typical issue in firefox which is not there in any other browser unfortunately.
Step 1 - Select 2nd option from the 1st dropdown. Immediately after that is done the div will be populated with value 2.
Step 2 - Now again CLICK on the 1st dropdown, i can see the 2nd option is disabled and only option 1 is allowed to select. Hover over the 1st option but do not click on it. Now if i click somewhere outside on the page to collapse the 1st SELECT tag and then clicks on the 2nd dropdown to expand it, change event of 1st dropdown is triggered and the div now displays 1 instead of 2.
This happens because firefox is unable to bring back the focus on option 2 since its disabled and unfortunately triggers a change on the 1st dropdown last hovered value.
Any workaround if can be suggested will help. Here is my JSfiddle for the same. Please open the fiddle in firefox to see the issue. http://jsfiddle.net/achyut/ybu6ovs5/7/
This issue was happening in Firefox 31 for Linux. After upgrading my Firefox to 36, this issue got resolved. It seems like Firefox has fixed this issue somewhere in between.
链接地址: http://www.djcxy.com/p/49652.html