How do I get the content to display in the other menu options?-CodePudding

Here is my complete code.

<html>
<head>
        <meta charset="utf-8">
        <title>Title</title>
        
        
            
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>



        

<style>
.hidden {
    display: none;
}
</style>




<style>
.down {
  font: bold 15px Arial;
  background-color:  red;
  color: white;
  padding: 3px 3px;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  border-top: 5px solid red;
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  border-left: 5px solid red;
}
</style>


</head>




<body>
   <select name="counties" id="county">
    <option>Select a County</option>
    <option value="1">County A</option>
    <option value="2">County B</option>
    <option value="3">County C</option>
    <option value="4">County D</option>
</select>

<div  id="co1">
    <p><select name="stations" id="station">
    <option>Select a station</option>
    <option value="1">Station A</option>
    <option value="2">Station B</option>
    <option value="3">Station C</option>
    <option value="4">Station D</option>
</select></p>
</div>
<div  id="co2">
    <p><select name="stations" id="station">
    <option>Select a station</option>
    <option value="5">Station E</option>
    <option value="6">Station F</option>
    <option value="7">Station G</option>
    <option value="8">Station H</option>
</select></p>
</div>
<div  id="co3">
    <p><select name="stations" id="station">
    <option>Select a station</option>
    <option value="9">Station I</option>
    <option value="10">Station J</option>
    <option value="11">Station K</option>
    <option value="12">Station L</option>
</select></p>
</div>
<div  id="co4">
    <p><select name="stations" id="station">
    <option>Select a station</option>
    <option value="13">Station M</option>
    <option value="14">Station N</option>
    <option value="15">Station O</option>
    <option value="16">Station P</option>
</select></p>
</div>     


<div  id="st1">
    <p><div role="main" >
    <div data-role="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" >Tab 1</a></li>
          
          <li><a href="#fragment-2">Tab 2</a></li>
        </ul>
      </div>
      <div id="fragment-1">
        



<audio id="audio0" src="example.mp3"></audio>
    <audio id="audio2" src=" "></audio>
    <button id="controls">ON</button>
</div>

<div id="fragment-2">
        Contents of Tab 2


</p>
    

</div>
  </div>
    </div>
  </div>
<div  id="st2">
    <p>Station B</p>
</div>
<div  id="st3">
    <p>Station C</p>
</div>  

<div  id="st4">
<p>Station D</p>
</div> 
 

<div  id="st14">
    <p>Station N</p>
</div>   
              

                       
                      
</body>

<script>
$(document).ready(function(){
    $('#county').on('change', function(){
        var theVal = $(this).val();
        $('.co').addClass('hidden');
        $('.co#co'   theVal).removeClass('hidden');
    });
});
</script>

<script>
$(document).ready(function(){
    $('#station').on('change', function(){
        var theVal = $(this).val();
        $('.st').addClass('hidden');
        $('.st#st'   theVal).removeClass('hidden');
    });
});
</script>






<!--(Script for Status)-->



<div id="unv" >
<script>

$("#audio0").on("click", function() {
      
      alert("Trying to play file.");
      try {
        $('audio')[0].play();
      } catch (e) {
       alert("Error playing file!");
      }
    });

    
    $("#audio0").on("error", function(e) {
      document.getElementById("controls").outerHTML = '<div id="dwn"  align="center" onclick="location.reload();"><h2><b>The audio file failed to load. Please try again later.</b></div>';
});
</script>
</div>


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


</html>

The problem is, it only shows content for the first menu option.

Which in this case would be County A (Stations A-D).

Here's what shows the first menu options.

<select name="counties" id="county">
   <option>Select a County</option>
   <option value="1">County A</option>
   <option value="2">County B</option>
   <option value="3">County C</option>
   <option value="4">County D</option>
 </select>

and here is what shows the second menu options after the first menu option is chosen.

<div  id="co1">
    <p><select name="stations" id="station">
    <option>Select a station</option>
    <option value="1">Station A</option>
    <option value="2">Station B</option>
    <option value="3">Station C</option>
    <option value="4">Station D</option>
</select></p>
</div>

Here are the menu options if County D is selected.

<div  id="co4">
    <p><select name="stations" id="station">
    <option>Select a station</option>
    <option value="13">Station M</option>
    <option value="14">Station N</option>
    <option value="15">Station O</option>
    <option value="16">Station P</option>
</select></p>
</div>

So basically the second menu options are

Stations A-D for County A Stations E-H for County B Stations I-L for County C Stations M-P for County D.

This determines what is shown after a Station listed in the second menu options is chosen.

    <div  id="st1">
        <p>Station A</p>
</div>
    <div  id="st2">
        <p>Station B</p>
    </div>
    <div  id="st3">
        <p>Station C</p>
    </div>  
    
    <div  id="st4">
        <p>Station D</p>
    </div>   
    
    <div  id="st14">
        <p>Station N</p>
    </div>

Here is my JavaScript code.

<script>
$(document).ready(function(){
    $('#county').on('change', function(){
        var theVal = $(this).val();
        $('.co').addClass('hidden');
        $('.co#co'   theVal).removeClass('hidden');
    });
});
</script>

<script>
$(document).ready(function(){
    $('#station').on('change', function(){
        var theVal = $(this).val();
        $('.st').addClass('hidden');
        $('.st#st'   theVal).removeClass('hidden');
    });
});
</script>

Stations A-D display under County A and there respective stations as expected.

However Station N which should display under County D Station N does not display at all.

I thought maybe each set of stations have to have a unique id and script. But when I tried that it didn't fix the problem. In fact it made it worse.

st1 goes with option value 1
st2 goes with option value 2
st3 goes with option value 3
st4 goes with option value 4

st14 should go with option value 14 and display if County D Station N is selected but it does not.

It seems that it only displays content if the st# is equal to the option value # listed under

If the st# is equal to the option value #s listed under <div id="co2"> - <div id="co4">it gets ignored and does not display at all.

How can I fix this problem?

I provided as much details as possible and tried my best to explain what's going wrong, what I tried to do to fix it and what I expect my code to do. That is why it's a long post.

Please take your time to carefully read and go over it so you don't miss anything important and so you understand what I am asking.

If you have a solution please explain in details how you fixed it by providing an updated code below.

Thank You!

CodePudding user response：

Because you have duplicate id : stations, id should only have 1. You should use class instead of id.
id="station" => and code :

$('.station').on('change', function() {
   \\ your code
})

it should be like this:

$(document).ready(function() {
  $('#county').on('change', function() {
    var theVal = $(this).val();
    $('.co').addClass('hidden');
    $('.co#co'   theVal).removeClass('hidden');
  });
  $('.station').on('change', function() {
    var theVal = $(this).val();
    $('.st').addClass('hidden');
    console.log(theVal)
    $('.st#st'   theVal).removeClass('hidden');
  });
});

.hidden {
  display: none;
}

.down {
  font: bold 15px Arial;
  background-color: red;
  color: white;
  padding: 3px 3px;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  border-top: 5px solid red;
  border-right: 5px solid red;
  border-bottom: 5px solid red;
  border-left: 5px solid red;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>
</head>

<body>
  <select name="counties" id="county">
    <option>Select a County</option>
    <option value="1">County A</option>
    <option value="2">County B</option>
    <option value="3">County C</option>
    <option value="4">County D</option>
  </select>
  <div  id="co1">
    <p>
      <select name="stations" >
        <option>Select a station</option>
        <option value="1">Station A</option>
        <option value="2">Station B</option>
        <option value="3">Station C</option>
        <option value="4">Station D</option>
      </select>
    </p>
  </div>
  <div  id="co2">
    <p>
      <select name="stations" >
        <option>Select a station</option>
        <option value="5">Station E</option>
        <option value="6">Station F</option>
        <option value="7">Station G</option>
        <option value="8">Station H</option>
      </select>
    </p>
  </div>
  <div  id="co3">
    <p>
      <select name="stations" >
        <option>Select a station</option>
        <option value="9">Station I</option>
        <option value="10">Station J</option>
        <option value="11">Station K</option>
        <option value="12">Station L</option>
      </select>
    </p>
  </div>
  <div  id="co4">
    <p>
      <select name="stations" >
        <option>Select a station</option>
        <option value="13">Station M</option>
        <option value="14">Station N</option>
        <option value="15">Station O</option>
        <option value="16">Station P</option>
      </select>
    </p>
  </div>
  <div  id="st1">
    <div role="main" >
      <div data-role="tabs">
        <div data-role="navbar">
          <ul>
            <li><a href="#fragment-1" >Tab 1</a></li>
            <li><a href="#fragment-2">Tab 2</a></li>
          </ul>
        </div>
        <div id="fragment-1">
          <audio id="audio0" src="example.mp3"></audio>
          <audio id="audio2" src=" "></audio>
          <button id="controls">ON</button>
        </div>
        <div id="fragment-2">
          <p>
            Contents of Tab 2
          </p>
        </div>
      </div>
    </div>
  </div>
  <div  id="st2">
    <p>Station B</p>
  </div>
  <div  id="st3">
    <p>Station C</p>
  </div>
  <div  id="st4">
    <p>Station D</p>
  </div>
  <div  id="st14">
    <p>Station N</p>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>