如何将if语句添加到Ajax

时间:2012-11-28 19:40:12

标签: ajax forms dom select

我主要做PHP编程,但由于我根本不了解Javascript或Ajax,所以我遇到了Ajax问题。我现在有一个组合选择菜单,如果第一个选择是='train',我想隐藏第三个选择菜单(方向)。我读到有些浏览器不支持隐藏功能,所以下一个最佳选择是在选择第二个选项时保持第三个选择菜单被禁用,假设第一个是火车。如果是公共汽车,则仍应显示第三个选择菜单。这是我现在的javascript,因为我相信你可以想象它不起作用。

    $(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);
        });
    });
    }
});

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

好像你不想要ajax,你想使用javascript来隐藏一个select,如果另一个select中有一个元素。然后使用您的ajax根据需要提交选择。以下是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>

脚本

//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();