如何让内容显示在其他菜单选项中？

Question

这是我的完整代码。

 <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 class="co hidden" 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 class="co hidden" 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 class="co hidden" 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 class="co hidden" 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 class="st hidden" id="st1"> <p><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="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 class="st hidden" id="st2"> <p>Station B</p> </div> <div class="st hidden" id="st3"> <p>Station C</p> </div> <div class="st hidden" id="st4"> <p>Station D</p> </div> <div class="st hidden" 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" 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </html>

问题是，它只显示第一个菜单选项的内容。

在这种情况下，将是 A 县（AD 站）。

这是显示第一个菜单选项的内容。

<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 class="co hidden" 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>

如果选择 D 郡，这里是菜单选项。

<div class="co hidden" 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> 

所以基本上第二个菜单选项是

A 县站 AD 县 B 站 EH C 县站 IL D 县站 MP

这决定了选择第二个菜单选项中列出的站后显示的内容。

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

这是我的 JavaScript 代码。

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

站点 AD 显示在 A 县下方，并按预期显示相应的站点。

但是，应该显示在 D 县站 N 下的站 N 根本不显示。

我想也许每组电台都必须有一个唯一的 ID 和脚本。 但是当我尝试它并没有解决问题时。 事实上，它使情况变得更糟。

st1 带有选项值 1
st2 带有选项值 2
st3 带有选项值 3
st4 带有选项值 4

st14 应与选项值 14 一起使用，如果选择了县 D 站 N，但未选择，则显示。

似乎它仅在 st# 等于下面列出的选项值 # 时才显示内容

如果 st# 等于<div class="co hidden" id="co2"> - <div class="co hidden" id="co4">下列出的选项值 #s，它将被忽略且不显示一点也不。

我该如何解决这个问题？

---

我提供了尽可能多的细节，并尽我所能解释出了什么问题，我试图做些什么来修复它以及我希望我的代码做什么。 这就是为什么它是一个很长的帖子。

请花点时间仔细阅读并仔细阅读，以免错过任何重要内容，从而了解我的要求。

如果您有解决方案，请通过在下面提供更新的代码详细说明您如何修复它。

谢谢你！

Answer 1

• 因为您有重复的id : stations ，所以id应该只有 1。您应该使用class而不是id 。
• id="station" => class="station"和代码：

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

它应该是这样的：

 $(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 class="co hidden" id="co1"> <p> <select name="stations" class="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 class="co hidden" id="co2"> <p> <select name="stations" class="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 class="co hidden" id="co3"> <p> <select name="stations" class="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 class="co hidden" id="co4"> <p> <select name="stations" class="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 class="st hidden" id="st1"> <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="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 class="st hidden" id="st2"> <p>Station B</p> </div> <div class="st hidden" id="st3"> <p>Station C</p> </div> <div class="st hidden" id="st4"> <p>Station D</p> </div> <div class="st hidden" 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>