【问题标题】:How to add if statements to Ajax如何将 if 语句添加到 Ajax
【发布时间】:2012-11-16 18:38:56
【问题描述】:

我主要从事 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);
        });
    });
    }
});

任何帮助将不胜感激!

【问题讨论】:

  • 因此,您是在尝试在文档准备好后立即进行 AJAX POST,还是应该基于某些 DOM 事件(选择更改、按钮单击等)真正触发所有这些活动? jQuery ``hide() 在浏览器中也很好。我知道的唯一hide() 问题是一个旧的Safari 错误,它试图在尚未附加到DOM 的元素上执行hide()。不确定这是否仍然是一个问题。
  • 谢谢迈克。我不想过多地更改代码,因为我在几个小时后才让它工作。正如我所提到的,我不精通任何类型的 javascript/ajax 语言,所以我只想添加几行简单的代码,以根据第一个选择的选项隐藏第三个选择。如果您对我如何做到这一点有任何想法,我将不胜感激。

标签: ajax forms dom select


【解决方案1】:

似乎您不想要 ajax,如果另一个选择中有某个元素,您想使用 javascript 隐藏一个选择。然后根据需要使用您的 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();

【讨论】:

  • 感谢您的意见!我尝试了它并试图将代码更改为我的代码,但它似乎不起作用。我不知道为什么它不起作用,但无论出于何种原因,我都无法让它起作用。我的第一个选择是代理,第二个是路线,第三个是方向,第四个是停靠点。如果在代理中,他们选择火车而不是公共汽车,那么我希望第三个选择(方向)消失。如果他们选择公共汽车,那么第三辆应该仍然留在那里。在前一个更改之前,所有选择字段都被禁用。我为我缺乏 Javascript 知识而道歉。我从来没有真正处理过它b4
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-07-31
  • 1970-01-01
  • 2021-05-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多