显示基于单选按钮的div（带POST）

Question

我知道有很多类似的问题，但我一直无法找到完全符合我的想法的问题。我在第一页（和其他内容）上有一个单选按钮，还有一个将一些数据发布到另一个页面的提交按钮。在第二页上，我有 2 个 div，如果在第一页上选择了 option1，我想显示 div1，如果选择了 option2，则显示 div2。看起来很简单，但我遇到了麻烦。有人可以帮我吗？这是我的代码：

第1页

<form method=post action='page2.php'>

  <input type="radio" id="option1" value="option1" name="options">

  <input type="radio" id="option2" value="option2" name="options">

  <button>Submit</button>

</form>

第2页

<?php $options = $_POST['options']; ?>

<div id="Div1" style="display: none"></div>

<div id="Div2" style="display: none"></div>

JS

$(function() {

 if ($options == 'option1') {

  document.getElementById(Div1).style.display = "block";

  document.getElementById(Div2).style.display = "none";

 }

 else if ($options == 'option1') {

  document.getElementById(Div2).style.display = "block";

  document.getElementById(Div1).style.display = "none";

 }

 return false;

});

Answer 1

使用php echo是将 PHP 变量传递给客户端 javascript 的一种方法：<?php $options = $_POST['options']; ?><div id="Div1" style="display: none"></div><div id="Div2" style="display: none"></div><script>&nbsp; $(function() {&nbsp; &nbsp;var $options = "<?php echo $options ?>"&nbsp; &nbsp;if ($options == 'option1') {&nbsp; &nbsp; document.getElementById(Div1).style.display = "block";&nbsp; &nbsp; document.getElementById(Div2).style.display = "none";&nbsp; &nbsp;}&nbsp; &nbsp;else if ($options == 'option1') {&nbsp; &nbsp; document.getElementById(Div2).style.display = "block";&nbsp; &nbsp; document.getElementById(Div1).style.display = "none";&nbsp; &nbsp;}&nbsp; &nbsp;return false;&nbsp; });</script>或者，您可以完全消除 javascript 和用户服务器端逻辑以仅呈现所需的 div：<?php $options = $_POST['options'];&nbsp; &nbsp; if ($options == "option1"){&nbsp; &nbsp; &nbsp; &nbsp; echo "<div id='Div1'></div>";&nbsp;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; echo "<div id='Div2'></div>";&nbsp; &nbsp; }?>