如何讓內容顯示在其他選單選項中？-有解無憂

這是我的完整代碼。

<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"  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# 等于下面列出的選項值 #s，<div id="co2"> - <div id="co4">它會被忽略并且根本不顯示。

我該如何解決這個問題？

我提供了盡可能多的細節，并盡我所能解釋出了什么問題，我試圖做些什么來修復它以及我希望我的代碼做什么。這就是為什么它是一個很長的帖子。

請花點時間仔細閱讀并仔細閱讀，以免遺漏任何重要內容，從而了解我的要求。

如果您有解決方案，請通過在下面提供更新的代碼詳細說明您如何修復它。

謝謝你！

uj5u.com熱心網友回復：

因為您有重復的id: stations，所以id應該只有 1 個。您應該使用class而不是id.
id="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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497894.html

標籤：javascript jQuery jquery-移动下拉式菜单

上一篇：即使未選中，如何在單選按鈕中獲取資料

下一篇：GithubPages不會加載我在網站構建后嘗試使用jquery獲取的影像