Question

我试图创建一个网站，其下拉菜单编码如下：

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

在理想的世界中，我希望相关信息显示在与下拉菜单相同的页面上。因此，当用户选择HTML选项时，该信息的所有信息都将显示在页面上，如果他们选择PHP选项，则HTML信息将被清除，PHP信息将被清除。 {1}}信息将被加载。

Answer 1

我在代码中添加了一些Jquery和CSS。除此之外你在你的价值领域忘记了“=”。解决方案是从select中获取值并使用它来决定必须显示哪个Id。请运行代码段并查看结果。

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>

表单显示项目PHP

1 个答案: