显示基于单选按钮的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>";

    }

?>