表单显示 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>

我尝试了两种答案，但似乎都不起作用。

- Jon Smith

---

“$("#languages")” - 我在您的选择元素中没有看到该ID。 - DaniP

@DaniP 它会放在哪里？ - Jon Smith

<select id="languages"> - DaniP

这个：name != id。$('#foo') 不会找到 <select name="foo">。 - Marc B

我尝试了两个答案，但出于某种原因，它没有做任何事情？ - Jon Smith

Answer 1

您的代码存在几个问题：

1. <option value"java">Java</option>中，您在value和字符串之间缺少了=，因此调用.val()会获取文本而不是值（因为它已经损坏了）。

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

3. 您需要将脚本放在html后面。

下面的代码段显示了仅具有必要修复的工作代码，我没有在选择器上设置选择器，而是根据名称使用了选择器：

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
}
?>

- pr0gramist

Answer 2

请使用以下代码替换您的js：

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

另一个选项是替换:

---

另一种选择是替换：

<select name="languages">

使用：

<select name="languages" id="languages">

- JorgeObregon