CODEWITHSUNDEEP
jquery
Em Sta
Em Sta

Reputation: 1696

Jquery only select one li

I tried to write the value of a li- tag to an input, my problem is that it only add oneli. How can i achive that several values of the li- are added seperated by commas! And also it would be good when each li- value can be added only once! Thanks, and sorry that i have absolutly no knowledge!

http://jsfiddle.net/QNtbp/

<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);
});

Upvotes: 1

Views: 929

Answers (4)

rktcool
rktcool

Reputation: 356

Here is crude, but working solution.

First I check to see if it is the first entry being made. If yes, there is no , at the front. If not, then we append , + value of clicked item.

I think the code is pretty self-explanatory, so I'll include it here. In case you want to see it in action, here is a 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 (Okay! Granted it is not necessary, but I kind of love the hand :) )

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

Hope this was of some use.

Upvotes: 3

PSL
PSL

Reputation: 123739

use $(this).html() or this.innerHTML instead of $("li").html() which will select all the li's and give yout the html of the first one in the collection. Ok i missed out the duplicate part so editing the answer:

$("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

Upvotes: 1

adeneo
adeneo

Reputation: 318182

Add new values and commas to the inputs value like so:

$("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

Upvotes: 2

luk2302
luk2302

Reputation: 57114

try var selects = $(this).html(); that should do the job

reson for that is that $('li') will return all objects that fit the selector and therefore the html() will only access the first element of that list. this is in the contect of the method a reference to exactly that element that the click happend to.

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

if you want to append you have to use

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

furthermore if you want to have the items comma seperated you should check if val is empty and if not append the new html with a comma: 

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

for the sake of allowing every value only once there are various approaches. for example you could create an array in which you insert the lis you already added to the text and check if they were added if a new one was pressed - or if the content of the lis is unique you can just check if the content already is present in the output.

Upvotes: 3

Related Questions