How to add if statements to Ajax - ajax

Question

I do mostly PHP programming, but am stuck on an Ajax problem since I do not know Javascript or Ajax very well at all. I have a combo select menu right now and I would like to hide the third select menu (direction) if the first choice is = 'train'. I read that some browsers do not support the hide function, so the next best option is to keep the third select menu disabled when the second option is chosen assuming the first is train. If it is bus, then the third select menu should still show. Here is my javascript right now and as I'm sure you can imagine it doesn't work.
$(document).ready(function(){
if ($("select#agency").attr('value') == 'cta-train') {
$("select#direction").attr("disabled","disabled");
}
$("select#route").attr("disabled","disabled");
$("select#agency").change(function(){
$("select#route").attr("disabled","disabled");
$("select#route").html("<option>wait...</option>");
var id = $("select#agency option:selected").attr('value');
$.post("select_route.php", {id:id}, function(data){
$("select#route").removeAttr("disabled");
$("select#route").html(data);
});
});
});
$(document).ready(function(){
if ($("select#agency").attr('value') == 'cta-train') {
$("select#direction").attr("disabled","disabled");
}
else {
$("select#direction").attr("disabled","disabled");
$("select#route").change(function(){
$("select#direction").attr("disabled","disabled");
$("select#direction").html("<option>wait...</option>");
var id = $("select#route option:selected").attr('value');
$.post("select_direction.php", {id:id}, function(data){
$("select#direction").removeAttr("disabled");
$("select#direction").html(data);
});
});
}
});
Any help would be greatly appreciated!

Answer 1

Seems like you dont want ajax, you want to use javascript to hide a select if another select has a certain element in it. Then use your ajax to file the select as needed. Here is an example of that http://jsfiddle.net/2FQwQ/
<select id='direction'>
<option value='train'>train</option>
<option value='car'>car</option>
<option value='pogo stick'>pogo stick</option>
<select>
<select id='agency'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<select>
<select id='route'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<select>
Script
//SEts your html up to hide the secelt if train
function amITrain() {
if ($('#direction').val() === "train"){
$('#route').hide();
$('#route').attr('disabled');
}else{
$('#route').show();
$('#route').removeAttr('disabled');
}
}
$('#direction').change(amITrain);
//When you get the ajax back, you would fill the select like this, then call the function
$('#direction').html("<option value='train'>train</option><option value='car'>car</option> <option value='pogo stick'>pogo stick</option>");
amITrain();