javascript selection menu dynamically add items from an array
Question
Hi everyone and thanks for helping on my first post.
I'm doing some work learning javascript and I gave myself the exercise of creating a page with an input text field, a button, and a selection box. I have created an array to hold input items from the text field and built a function to check and see if the array already contains the item.
What I would like to do, is have the selection box update dynamically to include new input items as they are entered into the array. Currently, I can get the selection box to update however, I end up with duplicate items in the selection box. I would like to prevent this occurrence. Can anyone suggest the best approach to this? I got the below code from another stack overflow post here . Apologies for any erroneous alerts or commented out sections. I have been using this to test.
<!DOCTYPE html>
<html>
<head>
<title>Keeper of Time</title>
<link rel="stylesheet" type="text/css" href="kot.css">
</head>
<body>
<div class="navDiv">
<ul id="navButtons">
<li><a href="">Home</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Entries</a></li>
<span><li><a href="">Account</a></li></span>
</ul>
</div>
<div id="newCltDiv">
<input id="newClt" type="text" placeholder="Add a new client">
<button id="addCltBtn"> Add Client</button>
</div>
<br>
<br>
<div id="cltListDiv">
<select id="cltList">
<option>Select an existing client</option>
</select>
</div>
<br>
<br>
<div id="test"></div>
<script type="text/javascript">
var clientArray = [];
var clientInput = document.getElementById("newClt");
var sel = document.getElementById("cltList");
document.getElementById("addCltBtn").onclick = function() {
console.log(clientArray.length);
if (!contains(clientArray, clientInput.value)) {
clientArray.push(clientInput.value);
console.log("Objects: " + clientArray.join(", "));
updateDropList();
} else alert("You already have a client by that name!");
}
function updateDropList() {
for (var i = 0; i < clientArray.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = clientArray[i];
opt.value = clientArray[i];
sel.appendChild(opt);
}
}
/*
clientArray.push("soccer");
if(contains(clientArray, "soccer")){
alert("the array contains soccer");
}
*/
function contains(a, obj) {
for (var i = 0; i < a.length; i++) {
if (a[i] === obj) {
return true;
}
}
return false;
}
</script>
</body>
</html>
1 answers
solution1
0 ACCPTED 2015-05-01 08:36:46
It's because you're looping through the entire clientArray each time.
Try this:
function updateDropList() {
var lastKey = clientArray.length-1;
var opt = document.createElement('option');
opt.innerHTML = clientArray[lastKey];
opt.value = clientArray[lastKey];
sel.appendChild(opt);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.