javascript - 使用表单向下拉菜单添加值

Question

有没有办法用简单的形式在下拉菜单中插入值？我有这个下拉菜单

<form>
  <select name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
  </select>
</form>

我应该使用数组吗？我一直在网上搜索，但找不到任何有用的东西。

Answer 1

这是一个将项目添加到下拉列表的 JavaScript 解决方案。

要使用的 HTML..

 <form>
    <select id="categories" name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
    </select>
    </form>​​

JavaScript 代码...

var categories = document.getElementById("categories");

var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');

categories.appendChild(newOption);
​

jQuery 代码...（短得多）

$("#categories").append("<option value='newvalue'>New Value</option>");

这是可以使用的 JavaScript JSFiddle和 jQuery JSFiddle！

Answer 2

您可以查看 jQueryappend()并option()使用click事件...

我刚刚为您创建了一个可行的解决方案。不知道这是否是您正在寻找的，但这就是它的工作原理：
您只需将值和可视选项名称写入表单文本字段：value, text它会为您提供：
<option value="value">text</option>

<select id="mySelect"></select>
<p>&nbsp;</p>
<input type="text" id="string"><br>
<button id="append">Append</button>


$('#append').click(function(){
    var str = $('#string').val();
    var substr = str.split(', ');
    $('#mySelect').append( new Option(substr[0],substr[1]));
});

这是一个工作版本：http: //jsfiddle.net/SCf8m/1/