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

问：

这是我的完整代码。

<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（站点 A-D）。

下面显示了第一个菜单选项。

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

以下是选择 County 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县A-D站 B县的E-H站 C县的I-L站 D县的M-P站。

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

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

A-D站显示在A县下，并按预期显示相应的站。

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

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

st1 与选项值 1 一起去
st2 去选项值 2
st3 去选项值 3
st4 去选项值 4

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

似乎只有当 st# 等于下面列出的选项值 # 时，它才会显示内容

如果 st# 等于 <div class=“co hidden” id=“co2”#s 下列出的选项值> - <div class=“co hidden” id=“co4”>它将被忽略并且根本不显示。

如何解决此问题？

我提供了尽可能多的细节，并尽力解释出了什么问题，我试图做些什么来修复它，以及我希望我的代码做什么。这就是为什么这是一篇很长的文章。请花点时间仔细阅读并仔细阅读，这样您就不会错过任何重要的东西，这样您就会明白我在问什么。

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

谢谢！

javascript jquery jquery-mobile 下拉菜单

答：

1赞 Xupitan 7/1/2022 #1

因为你有重复的：，应该只有 1。您应该使用代替 .idstationsidclassid
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>

0赞 Andrew Crum 7/2/2022

谢谢！您的解决方案奏效了。我没有选择投赞成票。

上一个：ASP.NET MVC 5：模型未从 Razor 窗体 w/jQuery Mobile 绑定到 HttpPostedFileBase

下一个：将 jQuery UI 和 JQuery Mobile cdns 添加到项目中，但主题获胜;t 工作

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

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

评论

评论