根据单选按钮显示 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>
  $(function() {
   var $options = "<?php echo $options ?>"
   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;
  });
</script>

或者，您可以完全消除 javascript 和用户服务器端逻辑以仅呈现所需的 div：

<?php $options = $_POST['options'];
    if ($options == "option1"){
        echo "<div id='Div1'></div>"; 
    } else {
        echo "<div id='Div2'></div>";
    }
?>