根据下拉选项更新页面

时间:2017-01-15 06:28:16

标签: php jquery html variables dynamic

我已创建此代码,根据所选的下拉菜单选项显示不同的变量。

<?php
$option = "option";
$result = "result";

$opt1[1] = "BP0";
$opt2[1] = "BP1";
$opt3[1] = "BP2";

$opt1[2] = "WH0";
$opt2[2] = "WH1";
$opt3[2] = "WH2";

$opt1[3] = "ME0";
$opt2[3] = "ME1";
$opt3[3] = "ME2";

 ?>

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Select - onchange example</title>
  </head>

  <body>
    <label for="meetingPlace">Meeting place: </label>
    <select id="meetingPlace">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select><br><br>
    <div id="results"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $("#meetingPlace").on("change", function(){
        var selected = $(this).val();
        if (selected == 0) {
           <?php echo $option; ?> = "<?php echo $result; ?>";
           <?php echo $option; ?> = "<?php echo $result; ?>";
           <?php echo $option; ?> = "<?php echo $result; ?>";

        }

  <?php
$x=1;
while ($x <= 3){
  $option1 = $option . $x ;
  $option2 = $option . $x ;
  $option3 = $option . $x ;

  $result1 = $opt1[$x];
  $result2 = $opt2[$x];
  $result3 = $opt3[$x];

   ?>
elseif (selected == <?php echo $x; ?>) {
   <?php echo $option1; ?> = "<?php echo $result1; ?>";
   <?php echo $option2; ?> = "<?php echo $result2; ?>";
   <?php echo $option3; ?> = "<?php echo $result3; ?>";

}


        $("#results").html("You selected: " + selected + " Option 1 " + <?php echo $option1; ?> + " Option 2 " + <?php echo $option2; ?> + " Option 3 " + <?php echo $option3; ?>);

<?php $x++; } ?>

      })
    </script>
  </body>
</html>

唯一的一点是,当选择一个选项然后你改变它时,屏幕不会改变。

有人可以提出建议吗?

0 个答案:

没有答案