<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Main Page</title>
<style type="text/css">
.newStyle1 {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: medium;
color: #0000FF;
font-variant: normal;
font-style: italic;
font-weight: normal;
background-color: #00FFFF;
}
.newStyle2 {
background-color: #C0C0C0;
}
.newStyle3 {
color: #0000FF;
}
.newStyle4 {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: medium;
font-weight: normal;
font-style: inherit;
font-variant: normal;
color: #0000FF;
background-color: #00FFFF;
}
</style>
</head>
<body class="newStyle2" onload="disableOnLoad()">
<script>
function disableOnLoad() {
document.getElementById("dropList").disabled = true;
}//on page load drop down list is disabled
function clickStore() {
if(typeof(Storage) !== "undefined") {
if(localStorage.weblink1){
document.getElementById("dropList").disabled = false;
document.getElementById("a").innerHTML = localStorage.weblink1//links retrieved
document.getElementById("b").innerHTML = localStorage.weblink2
document.getElementById("c").innerHTML = localStorage.weblink3
document.getElementById("d").innerHTML = localStorage.weblink4
document.getElementById("e").innerHTML = localStorage.weblink5
document.getElementById("result").innerHTML = "These websites have been stored in local storage.";
} else {
document.getElementById("dropList").enabled = false;
localStorage.weblink1= "www.yahoo.com";//links set to webpage text
localStorage.weblink2= "www.cnn.com";
localStorage.weblink3= "www.reddit.com";
localStorage.weblink4= "www.mnsu.edu";
localStorage.weblink5= "www.youtube.com";
//document.getElementById("buttonclick").disabled = true;
}
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}//setelement id
}
function getStore(value) {
window.open("http://" + value);//should retrieve from local storage
}
function addStore() {
var input = document.getElementById("inputtext");//get text from user input
localStorage.setItem("Text1", input.value); //place in local storage
var select = document.getElementById("dropList");//create variable select from droplist
var option = document.createElement("f");//create new element f
option.innerHTML = localStorage.Text1;//assign variable to local storage input
select.add(option);//add variable select to droplist with local storage input
document.getElementById("result2").innerHTML = "This website is added to local storage";
}
</script>
<p><button id="buttonclick" onclick="clickStore()" type="button" class="newStyle1">Click me!</button></p>
<div id="result" class="newStyle3"></div>
<form method="post">
<input id="inputtext" name="Text1" type="text"><input class="newStyle1" name="Button1" type="button" value="Add" onclick="addStore()"></form>
<div id="result2" class="newStyle3"></div>
<br>
<br>
<br>
<div>
<div class="newStyle3">
Click a link from the dropdown box to go to the site.</div>
</div>
<br>
<label>Dropdown list</label>
<select name="dropList" id="dropList" onchange="getStore(document.getElementById(this.value).innerHTML)" class="newStyle4">
<option value="a" id="a"></option>
<option value="b" id="b"></option>
<option value="c" id="c"></option>
<option value="d" id="d"></option>
<option value="e" id="e"></option>
</select>
</body>
</html>
到目前为止，这是我的代码。我试图通过用户输入获取一个元素并将其存储在本地存储中，然后将其添加到 html 中的现有下拉菜单中。我正在尝试围绕函数 addstore() 执行此操作。我能够将元素存储在本地存储中，但无法将其添加到下拉菜单中。这样做有什么建议吗？下拉列表应该用 HTML 硬编码还是应该用 javascript 创建才能工作？
最佳答案
这一行:
var option = document.createElement("f");
应该改为:
var option = document.createElement("option");
与本地存储无关
关于javascript - 将本地存储中的元素添加到 html 下拉菜单的建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26228283/