Question

我试图将li-tag的值写入输入，我的问题是它只添加oneli。我如何才能实现将逗号的几个值添加为逗号分隔！当每个li值只能添加一次时，它也会很好！谢谢，对不起，我绝对没有知识！

<div>
<ul>
<li>Item1</li>
<li>item2</li>
<li>Item3</li>
</ul>
</div>
<input type="text" id="meinOutput"/>


$("li").click(function() {
var selects = $("li").html();
$("#meinOutput").val(selects);
});

Answer 1

尝试应该完成工作的var selects = $(this).html();

这就是$('li')将返回适合选择器的所有对象，因此html()将只访问该列表的第一个元素。 this在方法的意义上是对点击发生的元素的引用。

http://jsfiddle.net/QNtbp/5/

如果你想追加你必须使用

var selects = $("#meinOutput").val() + $(this).html();

此外，如果你想让逗号分隔的项目你应该检查val是否为空，如果没有用逗号附加新的html：

var old = $("#meinOutput").val();
var selects = old == "" ? $(this).html() : old + "; " + $(this).html();`

为了在有各种方法时仅允许每个值。例如，您可以创建一个数组，在其中插入已添加到文本中的lis，并检查是否在按下新文件时添加了它们 - 或者如果lis的内容是唯一的，您只需检查内容是否已经是出现在输出中。

Answer 2

这是原始的，但有效的解决方案。

首先，我检查一下是否是第一个条目。如果是，前面没有,。如果没有，那么我们会附加, + value of clicked item。

我认为代码非常明显，所以我会把它包含在这里。如果您想看到它的实际效果，可以使用 JSFIDDLE

HTML

<div>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<input type="text" id="Output"/>
</div>

的Javascript

$(document).ready(function(){
    $("li").click(function(e){
        var sel = $(this).html();
        if($("#Output").val().length==0)
        {
           $("#Output").val(sel);
        }
        else
        {
           $("#Output").val($("#Output").val() + ", " + sel);
        }
    });
});

CSS（好吧！当然没有必要，但我喜欢这只手:)）

li:hover
{
cursor:hand;
cursor:pointer;
}

希望这有一些用处。

Answer 3

将新值和逗号添加到输入值，如下所示：

$("li").click(function() {
    var sel = $(this).text();

    $("#meinOutput").val(function(i, v) { 
        var p = v.length ? v.split(','):[];

        if( $.inArray(sel, p) == -1 ) 
            p.push(sel);
        return p.join(',');
    });
});

FIDDLE

Answer 4

使用$(this).html()或this.innerHTML代替$("li").html()，这将选择所有的内容，并为您提供集合中第一个的html。 好的我错过了重复部分，因此编辑答案：

$("li").click(function() {
    var selected = this.innerHTML;
    $("#meinOutput").val(function(_, curText){
        var ct = !curText.length ? [] : curText.split(';');
        if($.inArray(selected, ct) > -1) return curText;
        ct.push(selected);
        return ct.join(';');
    }); 
});

<强> Demo

Jquery只选择一个li

4 个答案: