javascript - 表单显示 PHP HTML

Question

我有多个相互交互的 PHP 文件，并且我在 output.php 文件上有一个名为 display_lang_offer() 的函数在 lang_offer.php 文件中被调用，如下所示:

function display_lang_offer(){
  //languages offered
?> 
<form>
  <select name="languages">
    <option></option>
    <option value"html">HTML</option>
    <option value"css">CSS</option>
    <option value"js">JavaScript</option>
    <option value"csharp">C#</option>
    <option value"php">PHP</option>
    <option value"java">Java</option>
    <option value"phython">Phython</option>
  </select>
  <br><br>
</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div> 
<div class="section" id="java">java content here</div>
<div class="section" id="phython">phython content here</div>

Javascript 是:

var id;
$("#languages").on("change",function(){
id=$(this).val();
$(".section").hide();
$("#"+id).stop().show();
})

CSS 是:

.section{display:none}

我如何知道，当我选择 HTML 选项时，会显示 HTML 内容？然后，如果我选择 Java 选项，HTML 选项就会消失，而出现 Java 选项。

编辑

现在整个函数是:

function display_lang_offer(){
  //languages offered
?> 
<script>
var id;
$("#languages").on("change",function(){
id=$(this).val();
$(".section").hide();
$("#"+id).stop().show();
})
</script>
<style>
.section{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="languages"id="languages">
    <option></option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="csharp">C#</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="python">Python</option>
  </select>
  <br><br>

</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div> 
<div class="section" id="java">java content here</div>
<div class="section" id="python">python content here</div>

我已经尝试了两个答案，但似乎都不起作用

Answer 1

您的代码有几个问题:

1. <option value"java">Java</option>你不见了=在值和字符串之间调用 .val()获取文本而不是值(因为它已损坏)

2. 您没有在 select 上设置 id元素。如果你想使用 $("#languages")在上面添加 id 值 <select name="languages" id="languages">

3. 需要把脚本放在html之后。

以下代码片段显示了仅进行必要修复的工作代码，我没有在 select 上设置 id，而是使用基于名称的选择器:

var id;
$("[name=languages]").on("change",function(){
 id = $(this).val();
 $(".section").hide();
 $("#"+id).show();
})

.section { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select name="languages">
    <option></option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="csharp">C#</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="phython">Phython</option>
  </select>
  <br><br>
<input type="Submit">
</form>
<div class="section" id="html">html content here</div>
<div class="section" id="css">CSS content here</div>
<div class="section" id="js">js content here</div>
<div class="section" id="csharp">csharp content here</div>
<div class="section" id="php">php content here</div> 
<div class="section" id="java">java content here</div>
<div class="section" id="phython">phython content here</div>

整个函数应该是这样的(但你可能不需要这些额外的 php 标签):

<?php
function display_lang_offer(){
  ?>
  <style>
  .section{display:none;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <form>
    <select name="languages"id="languages">
      <option></option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
      <option value="csharp">C#</option>
      <option value="php">PHP</option>
      <option value="java">Java</option>
      <option value="python">Python</option>
    </select>
    <br><br>

  </form>
  <div class="section" id="html">html content here</div>
  <div class="section" id="css">CSS content here</div>
  <div class="section" id="js">js content here</div>
  <div class="section" id="csharp">csharp content here</div>
  <div class="section" id="php">php content here</div>
  <div class="section" id="java">java content here</div>
  <div class="section" id="python">python content here</div>
  <script>
    var id;
    $("#languages").on("change",function(){
    id=$(this).val();
    $(".section").hide();
    $("#"+id).stop().show();
    })
    </script>
  <?php
}
?>