如何从selectmenu选项动态声明全局变量？

Question

我是编程菜鸟。我有一个selectmenu，我有两个按钮，允许用户添加和删除菜单中的选项。我想将selectmenu中的每个选项分配给object类型的变量，但遗憾的是我不知道用户将在前面的selectmenu中添加多少选项。有没有办法在每次用户向选择菜单添加新选项时动态声明新的全局变量？

请参阅下面的selectmenu的html代码。

<select id="List">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>

请参阅下面的jquery代码，为selectmenu添加一个选项。

$(".bt1").click(function () {
var opt = $("#ip1").val();
$('#List')
    .append($("<option></option>")
    .attr("value", opt)
    .text(opt));

Answer 1

如果您是初学者，我的第一个建议是不惜一切代价避免全局变量（无论编程语言如何）。在这篇文章中，您可以找到许多方法，了解如何在js中使用avoid。

回到你的问题，你可以在每次用户添加按钮时扩展包含按钮的对象，并在删除按钮后将其删除。或者您可以使用数组来存储按钮（对象和数组在js中几乎相同）。有很多方法。但是尝试将变量包装在函数中，避免不惜一切代价聚集全局空间。

Answer 2

<强> HTML

<select id="List">
    <option value="select">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="new">new</option>
    <option value="old">old</option>
</select>
<input type="button" id="delete"
 value="delete" />
<br />

<input type='text' id="readme" /><input id="add" type="button" value="add" /><br />

JQUERY

$('#add').on('click',function(){
    $("#List").append('<option>'+$('#readme').val()+'</option>');
});
$('#delete').on('click',function(){
    $("#List option:selected").remove();
});

下面的演示网址

http://jsfiddle.net/bxsnevzs/