Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
                        
                        3年前关闭。
                    
                
        

根据下拉菜单中选择的值,我有四种类型的表单可显示在同一页面上。如果

条件1:如果选择了“后轮胎和2WD”,我想显示表格名称=“ RA”

javascript - 如何在同一个php页面上显示和隐藏多个表单-LMLPHP

条件1:如果选择了“后轮胎和MFWD”,我想显示表格名称=“ RB”
javascript - 如何在同一个php页面上显示和隐藏多个表单-LMLPHP

条件1:如果选择了前轮胎和MFWD,我想显示表格名称=“ FA”
javascript - 如何在同一个php页面上显示和隐藏多个表单-LMLPHP

条件1:如果选择“前轮胎和2WD”,我想显示表格名称=“ FB”
javascript - 如何在同一个php页面上显示和隐藏多个表单-LMLPHP

我通过创建多个页面来使其工作,但是这会使页面加载缓慢且不友好,而是我想基于同一页面上的选定值进行加载

最佳答案

<select class="FrontRearTire">
    <option value="">Select Tire</option>
    <option value="RearTire">Rear Tyre</option>
    <option value="FrontTire">Front Tire</option>
</select>

<select class="TractorType">
    <option value="">Select Tractor</option>
    <option value="2WD">2WD</option>
    <option value="MFWD">MFWD</option>
</select>

<div class="RearTire2WD" style="display:none;">
    <form>RearTire2WD</form>
</div>

<div class="RearTireMFWD" style="display:none;">
    <form>RearTireMFWD</form>
</div>

<div class="FrontTire2WD" style="display:none;">
    <form>FrontTire2WD</form>
</div>

<div class="FrontTireMFWD" style="display:none;">
    <form>FrontTireMFWD</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $('.FrontRearTire').change(function(){
        var frontRearTire= $('.FrontRearTire').val();
        var tractorType= $('.TractorType').val();
        show(frontRearTire,tractorType);
    });
    $('.TractorType').change(function(){
        var frontRearTire= $('.FrontRearTire').val();
        var tractorType= $('.TractorType').val();
        show(frontRearTire,tractorType);
    });
    function show(frontRearTire,tractorType){
        var showDiv = "."+frontRearTire+tractorType;
        $(showDiv).show().siblings("div").hide();
    }
</script>


在几分钟内给出说明。

10-07 19:33
查看更多