I have copied several examples from this and other sites about how to add options to an HTML drop down list, but yet nothing happens. Here is my script:
<!DOCTYPE html>
<html><head></head>
<body>
<form>
<select name="p1customer" id="p1customer" onclick="addPC()">
<option>Apple</option>
</select>
<button type="button" onclick="addPC()">Insert option</button>
</form>
<script>
function addPC(){
let x = document.getElementById("p1customer");
let option1 = document.createElement("pc1");
option1.text = "myCustomer";
x.add(option1);
}
</script>
</body>
</html>
Whether I click on my drop-down or the button the option never gets added. I have placed alert functions after each line of code and have verified that the objects exist, but the x.add method does nothing. It doesn't add the option to my list.
What am I missing?
I merely had to assign a value to the option as seen below and everything works.
function addPC(){
let x = document.getElementById("p1customer");
let option1 = document.createElement("pc1");
option1.text = "myCustomer";
option1.value = "myC";
x.add(option1);
}
You have two mistakes in your code:
pc1 is not a tag name. so you cannot use it in the createElement function.x.appendChild instead of x.add.function addPC() { let x = document.getElementById("p1customer"); let option1 = document.createElement("option"); option1.text = "myCustomer"; x.appendChild(option1);