仅在选择菜单选项后显示内容。 选择第一个菜单选项后保持第二个菜单选项可见

Question

我有几个问题想问。

第一的。 我只想在选择第一个和第二个菜单选项后显示内容。 我可以让它在第一个例子中工作。 但是在第二个示例中，它会中断，并且在选择任何菜单选项之前，内容会显示在主页上。

这是第一个仅适用于文本的示例。

这是我的头部代码（这也是第二个示例的相同代码。）

<head>
        <meta charset="utf-8">
        <title>CAST</title>
        <link rel="stylesheet" href="./custom.css" />
        
            
<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>



        <script src="./global.js"></script>

<style>
#dropdown-counties p { display: none; }
</style>

<style>
#dropdown-stations p { display: none; }
</style>

</head>

这是我的第一个示例的正文（仅文本）

<body>
        
                

                       
                        <select name="county" id="county" data-native-menu="false">
                            
      <option data-for-county='0'>Select a County</option>
      <option data-for-county='1'>Adams</option>
      <option data-for-county='2'>Alexander</option>
      <option data-for-county='3'>Bond</option>
    </select>
    
    <div id='dropdown-counties'>
      
      <p id='county1'><select name="station" id="station" data-native-menu="false">
                            
      <option data-for-station='0'>Select a Station</option>
      <option data-for-station='1'>Station A</option>
      <option data-for-station='2'>Station B</option>
      <option data-for-station='3'>Station C</option>
    </select></div>

<p id='county1'>
<div id='dropdown-stations'>
      <p id='station1'> This is Station A</p>
      <p id='station2'> This is Station B</p>
      <p id='station3'> This is Station C</p>
</div>
</body>

这是第二个例子的我的身体。 （包括标签）

<body>
        
                

                       
                        <select name="county" id="county" data-native-menu="false">
                            
      <option data-for-county='0'>Select a County</option>
      <option data-for-county='1'>Adams</option>
      <option data-for-county='2'>Alexander</option>
      <option data-for-county='3'>Bond</option>
    </select>
    
    <div id='dropdown-counties'>
      
      <p id='county1'><select name="station" id="station" data-native-menu="false">
                            
      <option data-for-station='0'>Select a Station</option>
      <option data-for-station='1'>Station A</option>
      <option data-for-station='2'>Station B</option>
      <option data-for-station='3'>Station C</option>
    </select></div>

<p id='county1'>
<div id='dropdown-stations'>
      <p id='station1'><div role="main" class="ui-content">
    <div data-role="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" class="ui-btn-active">Tab 1</a></li>
          
          <li><a href="#fragment-2">Tab 2</a></li>
        </ul>
      </div>
      <div id="fragment-1">
        



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

</div>

<div id="fragment-2"> This is the contents of Tab 2
         
</div>
</div>
</div>
</p></p></div>

</body>

这是我的 Javascript。 （第二个例子也是如此。）

<script>
var counties_cntr = $('#dropdown-counties');
    $('select').on('change', function() {
        var county_id = $(this).children(':selected').data('for-county');
        if (!county_id) counties_cntr.children().hide();
        counties_cntr.children('#county'+county_id).show().siblings().hide();
    });
</script>

<script>
var stations_cntr = $('#dropdown-stations');
    $('select').on('change', function() {
        var station_id = $(this).children(':selected').data('for-station');
        if (!station_id) stations_cntr.children().hide();
        stations_cntr.children('#station'+station_id).show().siblings().hide();
    });
</script>



<script>
     var button = document.getElementById("controls");
     var track1 = document.getElementById("audio0");
     var track2 = document.getElementById("audio2");

     button.onclick = function(){
       currTrackNo = this.innerHTML.replace(/ /, "");
       nextTrackNo = (currTrackNo == "OFF")? "ON" : "OFF";
       this.innerHTML = " " + nextTrackNo;

       if (currTrackNo == "ON"){
         track1.load();
         track1.play();
         track2.load();
       } else {
         track2.play();
         track1.pause();
         
       }
     }
   </script>
<!--(Script for Status)-->



<div id="unv" class="down">
<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" class="down" align="center" onclick="location.reload();"><h2><b>The audio file failed to load. Please try again later.</b></div>';
});
</script>
</div>


<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
    reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>






<!--(Script Code for Audio Button)-->

<script> function PlaySound(soundobj) {  var thissound=document.getElementById(soundobj);  thissound.play();  }   function LoadSound(soundobj) {  var thissound=document.getElementById(soundobj);  thissound.load();  } </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

这就是第一个示例的运行方式。

 <head> <meta charset="utf-8"> <title>CAST</title> <link rel="stylesheet" href="./custom.css" /> <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> <script src="./global.js"></script> <style> #dropdown-counties p { display: none; } </style> <style> #dropdown-stations p { display: none; } </style> </head> <body> <select name="county" id="county" data-native-menu="false"> <option data-for-county='0'>Select a County</option> <option data-for-county='1'>Adams</option> <option data-for-county='2'>Alexander</option> <option data-for-county='3'>Bond</option> </select> <div id='dropdown-counties'> <p id='county1'><select name="station" id="station" data-native-menu="false"> <option data-for-station='0'>Select a Station</option> <option data-for-station='1'>Station A</option> <option data-for-station='2'>Station B</option> <option data-for-station='3'>Station C</option> </select></div> <p id='county1'> <div id='dropdown-stations'> <p id='station1'> This is Station A</p> <p id='station2'> This is Station B</p> <p id='station3'> This is Station C</p> </div> <script> var counties_cntr = $('#dropdown-counties'); $('select').on('change', function() { var county_id = $(this).children(':selected').data('for-county'); if (!county_id) counties_cntr.children().hide(); counties_cntr.children('#county'+county_id).show().siblings().hide(); }); </script> <script> var stations_cntr = $('#dropdown-stations'); $('select').on('change', function() { var station_id = $(this).children(':selected').data('for-station'); if (!station_id) stations_cntr.children().hide(); stations_cntr.children('#station'+station_id).show().siblings().hide(); }); </script>

这就是第二个示例的运行方式。

 <head> <meta charset="utf-8"> <title>CAST</title> <link rel="stylesheet" href="./custom.css" /> <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> <script src="./global.js"></script> <style> #dropdown-counties p { display: none; } </style> <style> #dropdown-stations p { 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="county" id="county" data-native-menu="false"> <option data-for-county='0'>Select a County</option> <option data-for-county='1'>Adams</option> <option data-for-county='2'>Alexander</option> <option data-for-county='3'>Bond</option> </select> <div id='dropdown-counties'> <p id='county1'><select name="station" id="station" data-native-menu="false"> <option data-for-station='0'>Select a Station</option> <option data-for-station='1'>Station A</option> <option data-for-station='2'>Station B</option> <option data-for-station='3'>Station C</option> </select></div> <p id='county1'> <div id='dropdown-stations'> <p id='station1'><div role="main" class="ui-content"> <div data-role="tabs"> <div data-role="navbar"> <ul> <li><a href="#fragment-1" class="ui-btn-active">Tab 1</a></li> <li><a href="#fragment-2">Tab 2</a></li> </ul> </div> <div id="fragment-1"> <audio id="audio0" src="www.example.mp3"></audio> <audio id="audio2" src=" "></audio> <button id="controls">ON</button> </div> <div id="fragment-2"> This is the contents of Tab 2 </div> </div> </div> </p></p></div> </body> <script> var counties_cntr = $('#dropdown-counties'); $('select').on('change', function() { var county_id = $(this).children(':selected').data('for-county'); if (!county_id) counties_cntr.children().hide(); counties_cntr.children('#county'+county_id).show().siblings().hide(); }); </script> <script> var stations_cntr = $('#dropdown-stations'); $('select').on('change', function() { var station_id = $(this).children(':selected').data('for-station'); if (!station_id) stations_cntr.children().hide(); stations_cntr.children('#station'+station_id).show().siblings().hide(); }); </script> <script> var button = document.getElementById("controls"); var track1 = document.getElementById("audio0"); var track2 = document.getElementById("audio2"); button.onclick = function(){ currTrackNo = this.innerHTML.replace(/ /, ""); nextTrackNo = (currTrackNo == "OFF")? "ON" : "OFF"; this.innerHTML = " " + nextTrackNo; if (currTrackNo == "ON"){ track1.load(); track1.play(); track2.load(); } else { track2.play(); track1.pause(); } } </script> <!--(Script for Status)--> <div id="unv" class="down"> <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" class="down" align="center" onclick="location.reload();"><h2><b>The audio file failed to load. Please try again later.</b></div>'; }); </script> </div> <!--(Script Code for Audio Button)--> <script> function PlaySound(soundobj) { var thissound=document.getElementById(soundobj); thissound.play(); } function LoadSound(soundobj) { var thissound=document.getElementById(soundobj); thissound.load(); } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </html>

这应该仅在选择县和车站后可见。 不是以前。 我认为这可能与结尾 /divs 有关，但我尝试的任何方法似乎都不起作用。 我怎样才能让它只在选择县和站后显示？

问题2

即使在其中选择了某些内容后，我也想保持第二个菜单选项可见。 现在（您可能已经注意到）它消失了。 我怎样才能防止这种情况发生？

请在下面提供工作代码示例以帮助我。

非常感激你的帮助。