0

我正在使用 JavaScript 根据如下下拉选择加载不同的表单：

<select id = "opts" onchange = "showForm()">
<option value = "0">Select Option</option>
<option value = "1">Option 1</option>
<option value = "2">Option 2</option>
</select>

<div id = "f1" style="display:none">
<form name= "form1">
Content of Form 1
</form>
</div>

<div id = "f2" style="display:none">
<form name= "form2">
Content of Form 2
</form>
</div>

<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}

</script>

我已经删除了实际的表单细节，因为此时它们并不重要。无论如何，提交表单时，它会通过一系列验证：

if (isset($_POST['submitted'])) { 
 //validation codes

}

这很好用，但如果验证失败，它会重新加载页面并因此重置下拉框，并且不会显示先前选择的选项。我希望它保留先前的选择，或者只是在提交失败时将选择 1 加载到 javascript 位中。有任何想法吗？

伊恩

4

2 回答 2

0

如果验证失败，您可以在 javascript 末尾执行此操作

window.onload = function(){
    document.getElementById("opts").value = <?php echo $_POST['opts']; ?>;
}
于 2013-07-02T11:45:57.390 回答
0

用这个

window.onload=function() {
  document.getElementById("opts").onchange=function() {
    var selopt = this.value;
    document.getElementById("f1").style.display=(selopt==1)?"block":"none";
    document.getElementById("f2").style.display=(selopt==2)?"block":"none";
  }
  document.getElementById("opts").onchange(); // show/hide when reloaded
}

使用这个 PHP 将选择设置为提交时的任何内容

<? $sel = $_POST['opts']; ?>
<select name="opts" id ="opts">
<option value = "0"<? if ($sel==0) echo " selected ";?>>Select Option</option>
<option value = "1"<? if ($sel==1) echo " selected ";?>>Option 1</option>
<option value = "2"<? if ($sel==2) echo " selected ";?>>Option 2</option>
</select>
于 2013-07-02T11:47:10.267 回答