Adding an option to an HTML drop-down list using Javascript does nothing

user_6099441 0
Viewed 28

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?

html javascript
2 Answers

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);     
}
user_60994410

You have two mistakes in your code:

  1. pc1 is not a tag name. so you cannot use it in the createElement function.
  2. For adding an option you should use x.appendChild instead of x.add.
function addPC() {
    let x = document.getElementById("p1customer");
    let option1 = document.createElement("option");
    option1.text = "myCustomer";
    x.appendChild(option1);
user_95878830
Related