页面重新加载后保持选定的下拉菜单选项可见

Question

I have an error message that only shows if the audio file isn't found.我有一条错误消息，仅在未找到音频文件时显示。 If it is found then people see an ON button.如果找到它，那么人们会看到一个 ON 按钮。 The error message can be clicked on to reload the page.可以单击错误消息重新加载页面。 I want it to remain on the current active drop down menu page.我希望它保留在当前活动的下拉菜单页面上。 Right now it makes you reselect an option from the drop down menu.现在，它使您可以从下拉菜单中重新选择一个选项。

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

I get this when i run the snippet. get this when i run the snippet.

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

Remember, Reload button is not in the body of the page but is in the script part of the page and only displays if there's an error.请记住，重新加载按钮不在页面的正文中，而是在页面的脚本部分，只有在出现错误时才会显示。 Even though button A in the first menu option should error as well.即使第一个菜单选项中的按钮 A 也应该出错。 I did not write a script for it to do that so you can see what it looks like with out the error.我没有为此编写脚本，因此您可以在没有错误的情况下查看它的外观。

Here is the script for the reload button.这是重新加载按钮的脚本。

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

Reloading in the snippet causes the page to go blank.在代码段中重新加载会导致页面变为空白。 But if you run the code and reload somewhere else it displays as if you haven't chosen a menu option yet.但是，如果您运行代码并在其他地方重新加载，它会显示为好像您还没有选择菜单选项一样。

I don't know where "filename": "https://stacksnippets.net/js", is coming from as I don't see that in my code.我不知道“文件名”：“https://stacksnippets.net/js”来自哪里，因为我在我的代码中没有看到它。

How can I get to to stay on the current selected menu option after the reload button is clicked?单击重新加载按钮后，如何才能保持当前选定的菜单选项？

Answer 1

const reloadButton = document.querySelector("#reload");
As there is no element with id reload, reloadButton value is null由于没有 id 为 reload 的元素，reloadButton 值为 null
reloadButton.addEventListener("click", reload, false);
As you now know that reloadButton is null, event cannot be attached如您现在所知，reloadButton 为空，无法附加事件

Instead of only creating the error body, add the reload button and then add an event, on this new reload button, refer code given below:而不是只创建错误主体，添加重新加载按钮，然后添加一个事件，在这个新的重新加载按钮上，参考下面给出的代码：

 $('#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>

As you created the New Reload Button, no need of this lines当您创建新的重新加载按钮时，不需要这些行

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

Note: No need to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> as you are using <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>注意：使用<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