使用窗体向下拉菜单添加值

Add value to a drop down menu with a form

本文关键字：添加 下拉菜单 窗体      更新时间：2023-09-26

有没有一种方法可以用简单的表单在下拉菜单中插入值？我有这个下拉菜单

<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>

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

这里有一个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>");

这里有JavaScriptJSFiddle和jQueryJSFiddl！

您可以查看带有click事件的jQuery append()和option()。。。

我刚刚为您创建了一个有效的解决方案。不知道这是否是你想要的，但这就是它的工作方式：
您只需将值和可视化选项名称写入表单文本字段：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/

相关文章：