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

Question

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

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

条件1：如果选择了后轮胎和MFWD，我想显示表格名称=“RB”

条件1：如果选择了Front Tire和MFWD，我想显示表格名称=“FA”

条件1：如果选择前轮胎和2WD，我想显示表格名称=“FB”

我通过创建多个页面来实现它，但这会使页面加载速度慢而且不友好，而我想根据同一页面上的选定值加载

Answer 1

只有使用javascript的解决方案：

＆＃13;

＆＃13;

function check()
{

  var select1=document.getElementById('s1').value;
  var select2=document.getElementById('s2').value;
  
  if ((select1==1)&&(select2==1)){
     document.getElementById('default').innerHTML = document.getElementById("RA").innerHTML;
  }
  else if ((select1==1)&&(select2==2)){
     document.getElementById('default').innerHTML = document.getElementById("RB").innerHTML;
  }
  else if ((select1==2)&&(select2==1)){
     document.getElementById('default').innerHTML = document.getElementById("FA").innerHTML;
  }
  else if ((select1==2)&&(select2==2)){
     document.getElementById('default').innerHTML = document.getElementById("FB").innerHTML;
  }

}

＆＃13;

<select onchange="check();" id="s1">
  <option value="0" selected disabled>Select element</option>
  <option value="1">Rear Tire</option>
  <option value="2">Front Tire</option>
</select>

<select onchange="check();" id="s2">
  <option value="0" selected disabled>Select element</option>
  <option value="1">2WD</option>
  <option value="2">MFWD</option>
</select>

<div id="default"></div>
<div id="RA" style="display: none;">Form RA</div>
<div id="RB" style="display: none;">Form RB</div>
<div id="FA" style="display: none;">Form FA</div>
<div id="FB" style="display: none;">Form FB</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<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>

在几分钟内给出描述。

Answer 3

<form id=form>

<select id=first onfocus="validate()" onchange ="validate()">
<option disabled=disabled selected=selected>please Choose</option>
<option>Rear Tire</option>
<option>Front Tire</option>

</select>

<select id=seconed onfocus="validate()" onchange ="validate()">
<option disabled=disabled selected=selected>please Choose</option>
<option>MFWD</option>
<option>2WD</option>

</select>
<input type=submit value="go">

</form>

<form id="RA" style="display:none"><input type=submit value="RA"></form>
<form id="RB" style="display:none"><input type=submit value="RB"></form>
<form id="FA" style="display:none"><input type=submit value="FA"></form>
<form id="FB" style="display:none"><input type=submit value="FB"></form>

<script>
function validate(){
var first = document.getElementById("first");
var firstval = first.options[first.selectedIndex].value;
var seconed = document.getElementById("seconed");
var seconedval = seconed.options[seconed.selectedIndex].value;

if(firstval == "Rear Tire" && seconedval ==  "2WD"){
document.getElementById("RA").style.display="";
document.getElementById("RB").style.display="none";
document.getElementById("FA").style.display="none";
document.getElementById("FB").style.display="none";
}else if(firstval == "Rear Tire" && seconedval ==  "MFWD"){
document.getElementById("RA").style.display="none";
document.getElementById("RB").style.display="";
document.getElementById("FA").style.display="none";
document.getElementById("FB").style.display="none";
}
else if(firstval == "Front Tire" && seconedval ==  "MFWD"){
document.getElementById("RA").style.display="none";
document.getElementById("RB").style.display="none";
document.getElementById("FA").style.display="";
document.getElementById("FB").style.display="none";
}
else if(firstval == "Front Tire" && seconedval ==  "2WD"){
document.getElementById("RA").style.display="none";
document.getElementById("RB").style.display="none";
document.getElementById("FA").style.display="none";
document.getElementById("FB").style.display="";
}
else{}

}
</script>

Answer 4

在没有大量JS的情况下执行此操作的快速方法是每次选择表单选项时重新加载页面。

在每个<select>上添加以下代码：

<select onChange="this.form.submit()">

这将在CBO更新后重新加载页面。

从那里开始，在下一个下拉列表中运行if语句。

if($_POST['tyre'] == 'rear' && $_POST['type'] == '2WD') {
    require_once '_rbForm.php';
}

像我说的那样，快点肮脏。它并不完美，但它可以快速完成您的要求。

Answer 5

您可以使用纯Javascript（甚至不是jQuery）在同一页面上显示和隐藏DIV：

function showMe(what) {
 var targ = what.options[what.selectedIndex].value;
 var allDivs = document.getElementsByClassName('output');
 for (i = 0; i < allDivs.length; i++) allDivs[i].style.display = 'none';
 document.getElementById('div_' + targ).style.display = 'block';
}

然后HTML：

<select name="zob" onchange="showMe(this)">
<option value='' selected>-- select --</option>
<option value="1">RA</option>
<option value="2">RB</option>
<option value="3">FA</option>
<option value="4">FB</option>
</select>
<hr>
<div id='div_1' class='output'>This is option 1 selected</div>
<div id='div_2' class='output'>This is option 2 selected</div>
<div id='div_3' class='output'>This is option 3 selected</div>
<div id='div_4' class='output'>This is option 4 selected</div>

然后是CSS：

.output{
  display: none;
}

参见jsFiddle：https://jsfiddle.net/48cp42r7/