如何添加和删除带有选项的选择框？

Question

I am working on a user page that displays select option like eg city name abc, and city name bcd. I want to dynamically add and remove cities from admin page to user page. I am new to java script and HTML.

On user page:

<script src="add.js"></script>
<form>
     <select id="newCity">
        <option>city1</option>
        <option>city2</option>
        <option>city3</option>
        <option>city4</option>
    </select>
</form>

Admin page:

<script src="add.js"></script>
<form>
    <select id="newCity">
        <option>city1</option>
        <option>city2</option>
        <option>city3</option>
        <option>city4</option>
    </select>
</form>
<button type="button" onclick="myFunction()">Insert city</button>

add.js file:

function myFunction() {
    var x = document.getElementById("newCity");
    var option = document.createElement("option");
    option.text = "new city";
    x.add(option);
}

Answer 1

You need to have a place from where both pages can retrieve data

I will use array

You need to call one() on user page load so that option values update immediately

I've added another button

 <button type="button" onclick="one()">Insert</button>

And then in javascript I've added array for holding values

 myarray = ["city1","city2","city3","city4","yo"];

myfunction()

...
var x = document.getElementById("newCity");
var option = document.createElement("option");

value="new";
option.text = value;
myarray.push(value);
x.add(option);
...

one()

...
var x = document.getElementById("newCity");
x.innerHTML= "";
for (i=0;i<myarray.length;i++){
    var option = document.createElement("option");

    value=myarray[i];
    option.text = value;
    x.add(option);
}
...