同じPHPページで複数のフォームを表示して非表示にするには

Question

ドロップダウンで選択した値に基づいて、同じページに4つのタイプのフォームを表示できます。リアタイヤ・2WD iはフォーム名= "RA"

条件1を表示する]を選択した場合：：

条件1があればリアタイヤとMFWDが選択されている場合、私は、フォームを表示したいです名前= "RB"

は条件1：フロントタイヤとMFWDは、私は、フォーム名= "FA"を表示する]を選択した場合

条件1：フロントタイヤと2WD iはフォーム名=「FB」

を表示する]を選択した場合、私はそれが複数のページを作成することで動作するが、それは、ページの読み込みが遅くなり得ると同じページの選択した値に基づいて読み込みたい場合は

Answer 1

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

JSをたくさん使わずにこのようにするのは、フォームオプションを選択するたびにページを再読み込みすることです。

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

CBOが更新された後にページをリロードします：各<select>オン

は、次のコードを追加します。

そこから、次のドロップダウンでif文を実行します。

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

私が言ったように、クイックn汚い。それは完璧ではありませんが、あなたが求めているものとすばやく行っています。

Answer 3

のみJavaScriptを使用してと解決策があります：

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

 
}

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

Answer 4

あなたは純粋な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/

Answer 5

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