M
Mark Smith
Is this a bug in jQuery or am I doing something wrong?
I am trying to chain together a bunch of drop down select boxes.
Whenever I just use .hide() and .show() it works fine. But if I
use .show("slow") it adds big gaps between some of the select boxes.
I get the same result with both FF, IE and Safari.
Example code is below. Any ideas?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></
script>
</head>
<body>
<form action="" onsubmit="return false;">
<input type="text" id="test" value="" style="width: 200px;" /><br/>
<select name="sel" id="sel">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<select name="sel1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<select name="sel2" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<select name="sel3" id="sel3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<script type="text/javascript">
$('#sel1').hide();
$('#sel2').hide();
$('#sel3').hide();
//$("#sel").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$("#sel").change(function(event)
{
//$("#sel1").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$('#sel1').show("slow");
$('#sel2').hide();
$('#sel3').hide();
});
$("#sel1").change(function(event)
{
//$("#sel2").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$('#sel2').show("slow");
$('#sel3').hide();
});
$("#sel2").change(function(event)
{
//$("#sel3").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$('#sel3').show("slow");
});
</script>
</body>
</html>
I am trying to chain together a bunch of drop down select boxes.
Whenever I just use .hide() and .show() it works fine. But if I
use .show("slow") it adds big gaps between some of the select boxes.
I get the same result with both FF, IE and Safari.
Example code is below. Any ideas?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></
script>
</head>
<body>
<form action="" onsubmit="return false;">
<input type="text" id="test" value="" style="width: 200px;" /><br/>
<select name="sel" id="sel">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<select name="sel1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<select name="sel2" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
<select name="sel3" id="sel3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<script type="text/javascript">
$('#sel1').hide();
$('#sel2').hide();
$('#sel3').hide();
//$("#sel").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$("#sel").change(function(event)
{
//$("#sel1").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$('#sel1').show("slow");
$('#sel2').hide();
$('#sel3').hide();
});
$("#sel1").change(function(event)
{
//$("#sel2").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$('#sel2').show("slow");
$('#sel3').hide();
});
$("#sel2").change(function(event)
{
//$("#sel3").ajaxAddOption("http://localhost:83/ajax/random", null,
false);
$('#sel3').show("slow");
});
</script>
</body>
</html>