如何添加和刪除帶有選項的選擇框？

Question

我正在一個用戶頁面上顯示選擇選項，例如城市名稱abc和城市名稱bcd。 我想從管理頁面到用戶頁面動態添加和刪除城市。 我是Java腳本和HTML的新手。

在用戶頁面上：

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

管理員頁面：

<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文件：

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

Answer 1

您需要在兩個頁面都可以從中檢索數據的地方

我將使用數組

您需要在用戶頁面加載時調用one（），以便選項值立即更新

我添加了另一個按鈕

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

然后在javascript中，我添加了用於保存值的數組

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

一（）

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