表格显示项目php [关闭]

Question

I'm trying to create a website that has a drop down menu which is coded like:

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

And in an ideal world, I'd want the relevent information to be displayed on the same page as the drop down menu. So when a user selects the HTML option, all the information for that will be displayed on the page, then if they choose the PHP option, the HTML information will be cleared and the PHP information will be loaded in.

Answer 1

I have added some Jquery and CSS to your codes. Besides you forgot "=" in your value field. The solution is to get the value from select and use it to decide which Id has to be shown. Please run the code snippet and see the result.

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

.section{display:none}

<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="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>

</div>