Javascript记住从下拉菜单中选择的选项值答案

【问题标题】：Javascript remember selected option value from dropdown menuJavascript记住从下拉菜单中选择的选项值
【发布时间】：2015-10-15 14:20:45
【问题描述】：

做了一些研究，我现在知道我必须编写所选选项的 cookie。然后读取 cookie 以检索值。

我发现了一个类似的问题，但无法从答案中弄清楚如何实现代码

Link to question

<html>
<head>
<title>dropdown remember selection test</title>
</head>
<body>

<iframe id="stream_iframe" marginwidth="0" marginheight="0" width="854"   height="480" scrolling="no" allowtransparency="true" frameborder="0" framespacing="0" name="stream_iframe" src="http://vaughnlive.tv/embed/video/moviebay"></iframe> 

<form> 
<select name="options" onchange="document.getElementById('stream_iframe').src = this.options[this.selectedIndex].value">
<option>SELECT STREAM
<option value="https://streamup.com/rooms/jumanjijoes-Channel/plugins/video/show?startMuted=false">Jumanjijoe</option>
<option value="http://vaughnlive.tv/embed/video/whenlinkattacks">Whenlinkattacks</option>
<option value="https://streamup.com/rooms/docblus-Channel/plugins/video/show?startMuted=false">Docblu</option> 
<option value="http://vaughnlive.tv/embed/video/karenwaifu">Karenmaiwaifu</option>
<option value="http://vaughnlive.tv/embed/video/ninjatart">Nightsanity</option>
<option value="http://vaughnlive.tv/embed/video/frightfest0001">Frightfest0001</option> 
<option value="http://vaughnlive.tv/embed/video/anime_hq">Anime HQ</option>
<option value="http://vaughnlive.tv/embed/video/moviebay">MovieBay</option>
<option value="http://vaughnlive.tv/embed/video/freakyfetish101">Horror Movie</option>
<option value="http://vaughnlive.tv//embed/video/111aaacharkmovies">111aaacharkmovies </option> 
</select>
</form>

</body>
</html>

我设法创建了一个可以更改 iframe SRC 的下拉菜单。我只需要它记住他们在刷新或浏览器退出时选择的内容。

【问题讨论】：

标签： javascript load selected

【解决方案1】：

为此，当用户选择值时，将值存储到浏览器的本地/或会话存储中，当用户重新打开时，首先检查本地存储是否具有值，如果是，则使用 jquery 选择值。

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

您可以在 w3schools 了解如何使用本地存储： http://www.w3schools.com/html/html5_webstorage.asp

已编辑：

在这里找到完整的代码

<iframe id="stream_iframe" marginwidth="0" marginheight="0" width="854" height="480" scrolling="no" allowtransparency="true" frameborder="0" framespacing="0" name="stream_iframe" src="http://vaughnlive.tv/embed/video/moviebay"></iframe> 

<form> 
<select name="options" onchange="callMe(this);" id="selectMovie">
<option>SELECT STREAM
<option value="https://streamup.com/rooms/jumanjijoes-Channel/plugins/video/show?startMuted=false">Jumanjijoe</option>
<option value="http://vaughnlive.tv/embed/video/whenlinkattacks">Whenlinkattacks</option>
<option value="https://streamup.com/rooms/docblus-Channel/plugins/video/show?startMuted=false">Docblu</option> 
<option value="http://vaughnlive.tv/embed/video/karenwaifu">Karenmaiwaifu</option>
<option value="http://vaughnlive.tv/embed/video/ninjatart">Nightsanity</option>
<option value="http://vaughnlive.tv/embed/video/frightfest0001">Frightfest0001</option> 
<option value="http://vaughnlive.tv/embed/video/anime_hq">Anime HQ</option>
<option value="http://vaughnlive.tv/embed/video/moviebay">MovieBay</option>
<option value="http://vaughnlive.tv/embed/video/freakyfetish101">Horror Movie</option>
<option value="http://vaughnlive.tv//embed/video/111aaacharkmovies">111aaacharkmovies </option> 
</select>
</form>
<script>
function callMe(obj){
localStorage.setItem("selectedStream",obj.options[obj.selectedIndex].value);
document.getElementById('stream_iframe').src = obj.options[obj.selectedIndex].value;
}
document.getElementById("stream_iframe").src = localStorage.getItem("selectedStream");
document.getElementById("selectMovie").value = ""+localStorage.getItem("selectedStream")+"";
</script>

【讨论】：

我知道我必须存储值问题是我不知道表单会是这样吗？ // 存储 localStorage.setItem("selectedStream", "value"); // 获取 document.getElementById("stream_iframe").innerHTML = localStorage.getItem("selectedStream");
我已经添加了完整的代码。将其复制到 html 文件并在浏览器上运行。
感谢您查看代码，我现在更好地理解了，谢谢。 src 在第一次运行时变为 null。