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

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?

CodePudding user response：

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

CodePudding user response：

You have two mistakes in your code:

pc1 is not a tag name. so you cannot use it in the createElement function.
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);