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

HTML code

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

Here I want to display only one list based on the option selected.

By default I need option A, so that list with id="alist" should be displayed and lists with id="blist" and id="clist should be hidden.

If I select option B, then second list should be displayed by hiding the first and third list.

I have done this too:

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

Please help me with this code below:

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

After running the code first list is shown, but i see only blank area when other two options are selected. I'm not getting the right thing i needed. Did I miss anything here?

Consider the following 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>

You don't have to use IDs, yet you can if you like to, they can be helpful. Classes can also be very helpful.

Now add some CSS.

.hidden {
  display: none;
}

This will hide all the lists up front and then using JavaScript/jQuery, you can reveal them.

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