我應該如何在HTML表單中創建一個列表框？

我想要一個列表框，用戶可以在其中添加他們在文本輸入中輸入的項目。該列表還應具有刪除，編輯功能。我應該如何在HTML表單中創建一個列表框？

這樣做的最佳方式是什麼（即硬編碼或有jQuery）？我猜測會需要JavaScript，這很好。

我該如何閱讀JS的所有值？我想連接項目與分隔符，以便我可以通過ajax發送它

來源

2013-01-19 allanx2000

您可以發送編碼爲JSON的AJAX整個對象。沒有必要重新發明輪子。 – Brad

@Brad哪個部分重新發明輪子？現在，服務器代碼被配置爲接受|分隔字符串如此...如果我發送一個對象，我必須重新配置服務器端...我寧願只發送列表框作爲分隔字符串 – allanx2000

如果您已經有服務器端代碼編寫解析，那麼很好。我建議不需要發明新的格式來表示文本中的數據。 – Brad

下面是一個使用jQuery將所有選項從列表框添加到逗號分隔字符串的示例;

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

編輯我碰到這種替代是乾淨多了IMO跑。

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

這裏有一個展示的jsfiddle本（也包括添加和從列表框中元素的移除）：http://jsfiddle.net/srGz7/4/

來源

2013-01-19 20:03:16 pjdanfor

你知道如何將輸入的文本從文本框添加到列表框中嗎？並從列表中刪除選定的項目？ – allanx2000

我已更新我的jsFiddle示例以包含此功能。看一看。讓我知道你是否有任何問題。 – pjdanfor

謝謝，會稍微修改它，但看起來它可以做我需要的一切。 – allanx2000

也許你可以看看這個jQuery插件 - jQuery Tokeninput。但是，您無法編輯該項目。

來源

2013-01-19 19:51:18 AnthonyY

這看起來非常好，只有一個小問題。用戶應該能夠輸入不在返回結果中的項目。我沒有看到該配置設置 – allanx2000

是的，您可以輸入新的項目。我做了一個新的演示[在這裏]（http://jsfiddle.net/anthony_yuan/7QCCb/）。你可以試試。只需輸入一個新項目並鍵入令牌分隔符（可自定義）'，'。注意：這裏使用一個未公開的選項：allowFreeTagging。 – AnthonyY

謝謝，不幸的是我已經完成了這個簡單的方法，我可能會稍後改變它，一旦完成了其他所有的工作 – allanx2000

我應該如何在HTML表單中創建一個列表框？

回答

相關問題