Question

我想知道如何在不刷新html页面的情况下将新元素添加到下拉菜单中。例如，如果我有下面的下拉菜单：

<select>
<option>existing item 1<option>
<option>existing item 2<option>
<option>existing item 3<option>
<option>add new item<option>
</select>

每当用户选择＆＃34;添加新项目＆＃34;时，将弹出一个文本框，要求用户输入。然后，无论用户在文本框中键入什么字符串，我都希望将其保存到下拉菜单而不刷新页面。当然，＆＃34;添加新项目＆＃34;选项将保持不变，因此用户可以按照自己的意愿重复此过程。

提前感谢您的帮助。

Answer 1

你可以使用jquery来实现..

$("select").append("<option>Another option</option>")

Answer 2

非JQuery方式是使用标准的JavaScript dom api，如下所示：

此作品使用提示作为文本弹出输入。如果你想要漂亮，你将不得不考虑一个UI框架。

JavaScript：

var select  = document.getElementById('select');
var addNewOption = document.getElementById('addNew');
select.onclick= function(){
  if (select.value === 'addNew'){
    var text = prompt('New Value');
    if (text){
       var label =  text;
  var value = text;
  var newOption = document.createElement('option');
  newOption.innerHTML = label;
  newOption.value = value;

  select.insertBefore(newOption, addNewOption);
  select.value = value;
    }

  }
};

在这里演示：

http://jsbin.com/sufug/2/edit

如何使用ajax将新元素添加到下拉菜单中？

2 个答案:

JavaScript：