我正在处理一个有 6 个 chkbox 的表单，并且根据 chkbox 的选择（允许多选），特定的 div 会被显示。每个 div 都包含一些问题（以下拉框的形式，这些值是硬核给出的，而不是来自 DB）。为此，我使用了 javascript。一切都按预期进行。但现在我想添加提交按钮（提交结果应显示在同一页面上）和提交表单时，我想显示选定的下拉值。
请帮帮我。提前致谢...
这是我尝试过的代码-
<!DOCTYPE html>
<html>
<head>
<script>
var showClasses = { };
function fnchecked(blnchecked,className)
{
if(blnchecked)
{
showClasses[className] = true;
}
else
{
showClasses[className] = false;
}
var ps = document.getElementById("div-block").children;
var psNumber = ps.length;
for (var i = 0; i < psNumber; i ++) {
var have = hasClasses(ps[i], showClasses);
if (have) {
ps[i].style.display = "";
} else {
ps[i].style.display = "none";
}
}
}
function hasClasses(element)
{
var result = false;
for (var cls in showClasses) {
if (showClasses[cls]) {
if ((' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1) {
result = true;
}
}
}
return result
}
</script>
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question1');" value="Kingspan Solar" /> Kingspan Solar</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question2');" value="Solar PVT" /> Solar PVT</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question3');" value="Insulation" /> Insulation</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question4');" value="Gas boiler" /> Gas boiler</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question5');" value="Oil boiler" /> Oil boiler</br>
<input type="checkbox" name="technologies[]" onChange="fnchecked(this.checked,'question6');" value="Heat recovery ventilation" /> Heat recovery ventilation</br>
<!--<input type="submit" name="formSubmit" value="Get The Info">--></br>
<input type="submit" name="submit" value="Submit"></p>
<?php
if(isset($_POST['submit']))
{
$tech = $_POST['technologies'];
if(empty($tech))
{
echo("You didn't select any Technologies.");
}
else
{
$N = count($tech);
echo("You selected $N Technology(s): ");
for($i=0; $i < $N; $i++)
{
echo($tech[$i] . " ");
}
}
}
?>
<div id="div-block" >
<p class=" question1 " style="display: none">
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p class="question1 question2 question3 question4 question5 question6 " style="display: none">
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p class="question1 question2 " style="display: none">
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p class="question1 question2 question3 question4 question5 " style="display: none">
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
<p class=" question2 " style="display: none">
How many people live at the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1-2</option>
<option value="people2">3</option>
<option value="people3">4</option>
<option value="people4">4-6</option>
<option value="people4">6-8</option>
</select>
</p>
<p class=" question3 " style="display: none">
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p class=" question4 question5 question6 " style="display: none">
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
<p class=" question4 question5 " style="display: none">
Do you use gas or oil?
<select name="gas_oil">
<option value="">Click & Choose</option>
<option value="gas_oil1">Gas</option>
<option value="gas_oil2">Oil</option>
</select>
</p>
<p class=" question4 question5 " style="display: none">
House you like to upgrade your central heating controls to SEAI standards so you can claim a grant for the works?
<select name="upgrade">
<option value="">Click & Choose</option>
<option value="upgrade1">Yes</option>
<option value="upgrade2">No</option>
</select>
</p>
<p class=" question6 " style="display: none">
Is this a new build or total renovation?
<select name="upgrade">
<option value="">Click & Choose</option>
<option value="upgrade1">Yes</option>
<option value="upgrade2">No</option>
</select>
</p>
</div>
</div>
</body>
</html>