表单显示PHP HTML

Form display PHP HTML

本文关键字：HTML PHP 显示 表单      更新时间：2023-09-26

我有多个相互作用的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>

我试过两种答案，但似乎都不工作

你的代码有几个问题:

  1. <option value"java">Java</option>您在值和字符串之间缺少=，因此调用.val()获得文本而不是值(因为它被打破)

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

  3. 你需要把script放在html后面

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

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

将js替换为:

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

另一个选项是替换:

<select name="languages">

: 

<select name="languages" id="languages">
相关文章：