从输入字段中添加和删除数据
我有这样的表格：
<form role="form" method="POST">
<div class="form-group">
<div class="form-group input-group">
<span class="input-group-addon">
Description
</span>
<input class="form-control" type="text" name="descr" maxlength="32" placeholder="Optional" >
</div>
</div>
<button type="submit" class="btn btn-success" name="name_new">
Add
</button>
</form>我想在它下面添加一个按钮/单词列表(例如:汽车、食物、电池、房子)，当用户点击这个单词时，它会被添加到被称为"descr“的输入字段中。如果他再次单击该单词，它将从输入字段中移除。
我点击汽车，食物，房子，输入包含：“汽车，食物，房子”。我再次点击食物，输入包含“车，房子”。
另外，如果在我点击pe word/按钮之后，它被转发到列表的开头(例如；
汽车，食物，电池，垄断，金钱，卡片，处女座，网站如果我点击“卡片”，列表变成:卡片，汽车，食物，电池，垄断，金钱，处女座，网站。
如果您对我如何使用JQuery/Json/javascript做这件事有任何建议，请给我一个提示/示例。
谢谢。
回答 3
Stack Overflow用户
发布于 2015-03-19 20:33:14
https://jsfiddle.net/sgbo3e1s/3/
$(document).ready(function(){
var $desc = $('.result');
var selected = [];
$('.word').click(function(){
var $this = $(this);
var val = $this.text();
if($this.hasClass('added')){
$this.removeClass('added');
selected.splice($.inArray(val, selected),1);
}
else{
$this.addClass('added');
selected.unshift(val);
if(!$this.hasClass('first')){
$this.insertBefore('.first');
$('.first').removeClass('first');
$this.addClass('first');
}
}
$desc.val(selected.join(','));
});
});Stack Overflow用户
发布于 2015-03-19 20:23:59
对此代码进行了测试和工作。
问题:当卡在文字输入，汽车被添加，汽车会发现在字卡，而不是添加汽车，卡失去了前3个字符，只留下了ds。
上述问题被逗号要求所激怒。添加的单词将以, (逗号空间)作为前缀。
如果添加的单词是第一个单词，那么它将类似于, word。
解决办法：
为了去掉前面的逗号，我使用了t.replace(/^, /,'');，它将行(^)开头的逗号替换为'‘空。
要想得到整个单词，而不是另一个单词(卡片中的汽车)，这个单词的边界必须包含在移除中。一个单词前面有一个空格或输入的开头。RegEx表达式在JavaScript中是"( \^)“。(输入的空格或开头)
单词尾部边界要么是逗号，要么是输入的结尾。regEx是(，\\$)
然后，在快速添加和删除之后会发生一些令人费解的事情，所以我添加了两个表达式来删除它们：，以及在输入末尾挂一个逗号。
echo <<<EOT
<!DOCTYPE html>
<html>
<head><title>Text</title>
<form role="form" method="POST">
<div class="form-group">
<div class="form-group input-group">
<span class="input-group-addon">Description</span>
<input id="txt" class="form-control" type="text" name="descr" maxlength="32" placeholder="Optional" >
</div></div>
</form>
<button onclick="show('car')">car</button><button onclick="show('food')"> food</button><button onclick="show('battery')"> battery</button><button onclick="show('monopoly')">monopoly</button><button onclick="show('money')">money</button><button onclick="show('cards')"> cards</button><button onclick="show('virgo')"> virgo</button>
<script type="text/javascript">
//<![CDATA[
var txt = document.getElementById('txt');
function show(word){
var re = new RegExp("( |^)" + word + "($|,)" ,"i");
if(txt.value.search(re) != -1){
var str = txt.value;
str = str.replace(re, "");
str = str.replace(/,,/gi, ",");
str = str.replace(/,$/gi, "");
str = str.replace(/, ,/gi, ",");
txt.value = str.replace(/,,/gi, ",");
}
else{
var str = txt.value ;
str.replace(/,/gi, "");
var t = txt.value + ', ' + word;
txt.value = t.replace(/^, /,'');
}
}
//]]>
</script></body></html>
EOT;Stack Overflow用户
发布于 2015-03-19 20:29:58
您可以这样做，way...Assuming，您单击的项目有类.item。另外，在输入中添加一个类以便于实现目标。您还需要提取lin当前数据，并为新数据分配一个逗号和空间。
<form role="form" method="POST">
<div class="form-group">
<div class="form-group input-group"> <span class="input-group-addon">Description</span>
<input class="form-control items" type="text" name="descr" maxlength="32" placeholder="Optional" >
</div>
</div>
<button type="submit" class="btn btn-success" name="name_new">Add</button>
</form>
<a href="" class="item" >Car</a>
<a href="" class="item" >House</a>
$(".item").on("click", function(e) {
itemname = $(this).text();
current = $(".items").val();
$(".items").val(current+itemname+", ");
e.preventDefault();
});https://stackoverflow.com/questions/29154048
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号