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

时间:2017-02-05 16:41:30

标签: javascript html

我正在用户页面上显示选择选项,例如城市名称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);
}

1 个答案:

答案 0 :(得分:0)

您需要有两个页面都可以检索数据的地方

我将使用数组

您需要在用户页面加载时调用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);
}
...