頁面重新加載后保持選定的下拉菜單選項可見

Question

我有一條錯誤消息，僅在未找到音頻文件時顯示。 如果找到它，那么人們會看到一個 ON 按鈕。 可以單擊錯誤消息重新加載頁面。 我希望它保留在當前活動的下拉菜單頁面上。 現在，它使您可以從下拉菜單中重新選擇一個選項。

 <!--I coult not get the page to display properly by putting the JS code here. That is why it's in the html field-->

 <!--I coult not get the page to display properly by putting the css code here. That is why it's in the html field-->

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <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="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.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> <style> select { border: 50px; color: #000000; background: #12f3fd; text-align: center; font-weight: bold; *background: Black; } </style> </head> <body> <div align="center"> <select name="stations" id="station" style="font-size:25px;" align="center"> <option>Select a Opton</option> <option value="1">What you see if audio file was found</option> <option value="2">What you see if audio file was not found</option> </select> </div> <div class="st hidden" id="st1"> <p> <audio id="audio1" src="example.mp3"></audio> <button id="A" class="button">ON</button> </p> </div> <div class="st hidden" id="st2"> <p> <audio id="audio2" src="example.mp3"></audio> <button id="B" class="button">ON</button> </p> </div> </body> <!--Controls the Drop Down Menu--> <script> $(document).ready(function(){ $('#station').on('change', function(){ var theVal = $(this).val(); $('.st').addClass('hidden'); $('.st#st' + theVal).removeClass('hidden'); }); }); </script> <!--Displays the error message if the audio file is not found and gives the option to reload the page.--> <div id="dwnB" class="down"> <script> $("#audio2").on("error", function(e) { document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>'; }); </script> </div> <!--This script reloads the page and is tied to the above script--> <script> const reloadtButton = document.querySelector("#reload"); // Reload everything: function reload() { reload = location.reload(); } // Event listeners for reload reloadButton.addEventListener("click", reload, false); </script> </html>

get this when i run the snippet.

Error: {
  "message": "Uncaught ReferenceError: reloadButton is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 123,
  "colno": 1
}

請記住，重新加載按鈕不在頁面的正文中，而是在頁面的腳本部分，只有在出現錯誤時才會顯示。 即使第一個菜單選項中的按鈕 A 也應該出錯。 我沒有為此編寫腳本，因此您可以在沒有錯誤的情況下查看它的外觀。

這是重新加載按鈕的腳本。

<!--Displays the error message if the audio file is not found and gives the option to reload the page. The entire error message is the reload button.-->

<div id="dwnB" class="down">

<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
        
});
</script>
</div>

<!--This script reloads the page and is tied to the above script-->

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

在代碼段中重新加載會導致頁面變為空白。 但是，如果您運行代碼並在其他地方重新加載，它會顯示為好像您還沒有選擇菜單選項一樣。

我不知道“文件名”：“https://stacksnippets.net/js”來自哪里，因為我在我的代碼中沒有看到它。

單擊重新加載按鈕后，如何才能保持當前選定的菜單選項？

Answer 1

const reloadButton = document.querySelector("#reload");
由於沒有 id 為 reload 的元素，reloadButton 值為 null
reloadButton.addEventListener("click", reload, false);
如您現在所知，reloadButton 為空，無法附加事件

而不是只創建錯誤主體，添加重新加載按鈕，然后添加一個事件，在這個新的重新加載按鈕上，參考下面給出的代碼：

 $('#audio2').on('error', function (e) { document.getElementById('B').outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b><br><button class="reload">Reload</button> </div>'; //once element with id 'dwnB' is created find the Reload Button let newReloadButton = document.querySelector("#dwnB .reload"); newReloadButton.addEventListener('click', reload, false); }); $(document).ready(function () { $('#station').on('change', function () { let value = $(this).val(); $('.st').addClass('hidden'); $('.st#st' + value).removeClass('hidden'); //store your latest value in localStorage localStorage.setItem('station', value); }); //fetch the old value from localStorage let oldStation = localStorage.getItem('station'); //set station value as per stored value if (oldStation) { $('#station').val(oldStation).trigger('change'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

當您創建新的重新加載按鈕時，不需要這些行

const reloadButton = document.querySelector("#reload");
reloadButton.addEventListener("click", reload, false);

注意：使用<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> script src= 時無需添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

頁面重新加載后保持選定的下拉菜單選項可見

問題描述

1 個解決方案

解決方案1
1 2022-07-06 05:09:40

頁面重新加載后保持選定的下拉菜單選項可見

問題描述

1 個解決方案

解決方案1 1 2022-07-06 05:09:40

解決方案1
1 2022-07-06 05:09:40