Menu
In FF this hides all divs and then shows the id that was selected from the '#rule_rule_type' menu, which is the expected behavior. In IE 8 it does not hide all div id's:
<script type="text/javascript" charset="utf-8">
(function($){
$('#rule_rule_type').change(function() {
$('#allowed_senders, #blocked_senders, #blocked_character_set, #custom').hide();
var id = $(this).val();
$('#' + id).show();
});
})(jQuery);
</script>
However, this DOES work in IE 8:
<script type="text/javascript" charset="utf-8">
(function($){
$('#rule_rule_type').change(function() {
$('#allowed_senders').hide();
$('#blocked_senders').hide();
$('#blocked_character_set').hide();
$('#custom').hide();
var id = $(this).val();
$('#' + id).show();
});
})(jQuery);
</script>
This is messy. How can I clean this up to be more concise and still work in IE 8?
Thanks,
Chip Castle
http://invoicethat.com
398
I'm running your sample just fine in IE8 and Chrome. Is it different in some way?
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Sandbox</title>
</head>
<body>
<select id='rule_rule_type'>
<option value="allowed_senders">allowed_senders</option>
<option value="blocked_senders">blocked_senders</option>
<option value="blocked_character_set">blocked_character_set</option>
<option value="custom">custom</option>
</select>
<hr />
<div id="allowed_senders">#allowed_senders</div>
<div id="blocked_senders">#blocked_senders</div>
<div id="blocked_character_set">#blocked_character_set</div>
<div id="custom">#custom</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('#rule_rule_type').change(function () {
$('#allowed_senders, #blocked_senders, #blocked_character_set, #custom').hide();
var id = $(this).val();
$('#' + id).show();
});
});
</script>
</body>
</html>
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
