使用 JQuery 根据所选选项显示列表组中的单个列表

Question

HTML代码

<Select id="alphalist">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</Select>
 
<div class="lists" style="display"> 
  <ul id="alist"> 
      <li>Axe</li> 
      <li>Arc</li> 
      <li>Apple</li>
  </ul>  
</div>

<div class="lists" style="display:none"> 
  <ul id="blist"> 
      <li>Bat</li> 
      <li>Boat</li> 
      <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" style="display:none"> 
  <ul id="clist"> 
      <li>Cat</li> 
      <li>Coat</li> 
      <li>Cream</li>  
  </ul> 
</div>

这里我想根据选项 selected.

只显示一个列表

默认情况下，我需要选项 A，因此应显示带有 id="alist" 的列表和带有 id="blist"[=31] 的列表=] 和 id="clist 应该被隐藏。

如果我select选项B，那么第二个列表应该通过隐藏第一个和第三个列表来显示。

我也这样做过：

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>

请帮助我使用以下代码：

$(function() { $('#alphalist').change(function(){ $('.lists').hide(); $('#' + $(this).val()).show(); }); });

在运行之后显示代码第一个列表，但是当其他两个选项被 selected 时我只看到空白区域。我没有得到我需要的正确的东西。我错过了什么吗？

Answer 1

您缺少 div1 和 div2 的 ID。

$(function() 
{
 $('#alphalist').change(function(){
 $('.lists').hide();
 $('#' + $(this).val()).show();
 });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<Select id="alphalist">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</Select>
 
<div id="a" class="lists" style="display"> 
  <ul id="alist"> 
      <li>Axe</li> 
      <li>Arc</li> 
      <li>Apple</li>
  </ul>  
</div>

<div id="b" class="lists" style="display:none"> 
  <ul id="blist"> 
      <li>Bat</li> 
      <li>Boat</li> 
      <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" style="display:none"> 
  <ul id="clist"> 
      <li>Cat</li> 
      <li>Coat</li> 
      <li>Cream</li>  
  </ul> 
</div>

Answer 2

考虑以下 HTML。

<select id="alphalist">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</Select>
 
<div class="list a hidden"> 
  <ul id="alist"> 
    <li>Axe</li> 
    <li>Arc</li> 
    <li>Apple</li>
  </ul>  
</div>

<div class="list b hidden"> 
  <ul id="blist"> 
    <li>Bat</li> 
    <li>Boat</li> 
    <li>Bee</li>
  </ul>
</div>

<div class="list c hidden"> 
  <ul id="clist"> 
    <li>Cat</li> 
    <li>Coat</li> 
    <li>Cream</li>  
  </ul> 
</div>

您不一定要使用 ID，但如果您愿意，可以使用，它们会很有帮助。类也很有帮助。

现在添加一些 CSS.

.hidden {
  display: none;
}

这会预先隐藏所有列表，然后使用 JavaScript/jQuery，您可以显示它们。

$(function() {
  $("#alphalist").change(function() {
    var s = $(this).val();
    $(".list").hide();
    if (s.length) {
      $(".list." + s).show();
    }
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="alphalist">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</Select>

<div class="list a">
  <ul id="alist">
    <li>Axe</li>
    <li>Arc</li>
    <li>Apple</li>
  </ul>
</div>

<div class="list b hidden">
  <ul id="blist">
    <li>Bat</li>
    <li>Boat</li>
    <li>Bee</li>
  </ul>
</div>

<div class="list c hidden">
  <ul id="clist">
    <li>Cat</li>
    <li>Coat</li>
    <li>Cream</li>
  </ul>
</div>

使用 JQuery 根据所选选项显示列表组中的单个列表

Display a single list from group of lists based on selected option using JQuery

html

jquery

html-lists

unordered