如何在HTML表单中创建列表框?

How should I create a listbox in a HTML form?

本文关键字:创建 列表 表单 HTML      更新时间:2023-09-26

我想有一个列表框,用户可以在其中添加他们在文本输入中输入的项目。该列表还应该具有删除、编辑功能。

什么是最好的方法来做到这一点(即硬代码或有一个jquery)?我猜需要javascript,这很好。

我如何从JS读取所有的值?我想用分隔符连接条目这样我就可以通过ajax发送了

下面是一个使用jQuery将列表框中的所有选项添加到逗号分隔字符串的示例;

function toAllan() {
  var allanString = "";
  var allanOptions = $('.myListBox option');
  allanOptions.each(function (index) {
    allanString += $(this).val();
    if (index != allanOptions.length - 1) {
      allanString += ",";
    }
  });
  return allanString;
}

EDIT我偶然发现了这个选项,在我看来它更干净。

function toAllan() {
  return $('#myListBox option').map(function (index) {
      return $(this).val();
  }).get().join(',');
}

下面的jsFiddle演示了这一点(还包括从列表框中添加和删除元素):http://jsfiddle.net/srGz7/4/

也许你可以看看这个jquery插件- jquery Tokeninput。但是你不能编辑该项