I have a form with a select field. Depending upon the selection, an optional second field (different for each selection) should appear to gather further information. I had a script I wrote in jQuery to do this and I converted it quickly to a plugin (with the intent to add more of my commonly used form related code to the plugin a开发者_StackOverflow社区t a later date -- obv with changes to follow in that regard).
Anyway, the problem is that this code functions fine in IE7, Firefox, Chrome, Opera, etc. But it consistently causes installs of IE8 on several different computers to completely freeze. It never unfreezes and never gives an error. I'm baffled as to why this would happen or how to troubleshoot from here, given the lack of any information to debug on.
The HTML generally looks like this (snip).
<!-- Controls Below -->
<li class="group-1 has-dependents">
<label for="selSource">How did you hear about us?</label>
<select id="selSource" name="selSource">
<option value="0">Select One</option>
<option class="group-referral" value="1">Referral</option>
<option class="group-conference" value="4">Conference</option>
<option class="group-other" value="7">Other</option>
</select>
</li>
<!-- Controlled Above -->
<li id="itemSource" class="group-1 dependent">
<!-- Opt 1 -->
<label for="selSourceReferral" class="group-referral">Who gave the referral?</label>
<select name="selSourceReferral" id="selSourceReferral" class="group-referral" disabled="disabled">
<option value="0">Select One</option>
<option value="101">....</option>
<option value="102">....</option>
<option value="103">....</option>
<option value="999">....</option>
</select>
<!-- Opt 2 -->
<label for="selSourceConference" class="group-conference">Which conference?</label>
<select name="selSourceConference" id="selSourceConference" class="group-conference" disabled="disabled">
<option value="0">Select One</option>
<option value="101">....</option>
<option value="102">....</option>
<option value="103">....</option>
<option value="999">....</option>
</select>
<!-- Opt 3 -->
<label for="txtSourceOther" class="group-other">Please Specify</label>
<input type="text" name="txtSourceOther" id="Text1" class="group-other" disabled="disabled" />
<input type="text" name="txtSourceSubOther" id="Text2" class="group-other" disabled="disabled" />
</li>
The plugin code is as follows:
(function($){
/* Show associated fields based on current selection */
function show_dependents(_this, _event){
var current = $('select option[value=' + $(_this).val() + ']').attr("class");
if(current.length > 0){
var temp = $(_this).closest('label, li, div, fieldset').attr("class").split(' ');
for(var i = 0; i < temp.length; i++){
if(temp[i].search("group-") >= 0){
temp = "." + temp[i] + "." + "dependent";
$(temp).find('label, input, select, li, div, fieldset').not('.' + current).fadeOut(function(){
$(temp).find('label, input, select, li, div, fieldset').not('.' + current).hide();
});
$(temp).find('.' + current).removeAttr('disabled').fadeIn();
}
}
}
}
$.fn.rlmforms = function(options){
return this.each(function(){
$(this).bind('change.current',
function(e){
show_dependents(this, e);
}
);
$(this).trigger('change.current');
}); // this.each()
} // $.fn.rlmforms = function(options)
})(jQuery);
It's called by:
$('#selSource').rlmforms();
Any ideas? Note that it doesn't freeze when the page is loaded, but rather it freezes when the parent select field is clicked. The options drop down, and one can be clicked and highlighted. At which point the browser freezes up completely and never unfreezes. The dropdown doesn't even come back up, but stays down with the one that was clicked highlighted.
精彩评论