CODEWITHSUNDEEP
jqueryhtml-lists
s.mujahid8
s.mujahid8

Reputation: 189

Getting values(STRING) of ul into jquery variable

I have ul like this:

<ul class="options" id="selt_count">
  <li value="1">One</li>
  <li value="2">Two</li>
  <li value="5">Five</li>
  <li value="12">Other</li>
</ul>
<input type="submit" id="send1" value="send">

i used this script to get all values of li into variable in the following format (1,2,5,12) in jquery:

<script>
    $(document).ready(function(){
        $("#send1").click(function(){
            var values = $('#selt_count li').map(function() {
                return this.value
            });
            values;
            var s = '(' + values.get().join(',') + ')';
            alert (s);
        });
    });
</script>

But this script is not working if the values of li are given as character

Example: Now i have a ul:

<ul class="options" id="selt_count">
    <li value="jonh">One</li>
    <li value="jack">Two</li>
    <li value="black">Five</li>
    <li value="barbosa">Other</li>
</ul>

the script will display (0,0,0,0)

Can anyone please help me and tell me what is the error? thank you in advance.

Upvotes: 1

Views: 8535

Answers (4)

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

Try your HTML like this:

<ul class="options" id="selt_count">
    <li data-value="jonh">One</li>
    <li data-value="jack">Two</li>
    <li data-value="black">Five</li>
    <li data-value="barbosa">Other</li>
</ul>

And JavaScript like this:

<script>
$('#selt_count li').click(function() {
    var index = $(this).index();
    var text = $(this).text();
    var value = $(this).attr('data-value');
    alert('Index is: ' + index + ' , text is ' + text + ' and value is ' + value);
});
</script>

more about data-* here: http://html5doctor.com/html5-custom-data-attributes/

additional script based on your edits...

<script>
    $(document).ready(function(){
        $("#send1").click(function(){
            var values = $('#selt_count li').map(function() {
                return $(this).attr('data-value');
            });
            var s = '(' + values.get().join(',') + ')';
            alert (s);
        });
    });
</script>

Upvotes: 1

KarSho
KarSho

Reputation: 5746

Try this link. This may help you.

with,

$('#selt_count li').click(function() {
    var index = $(this).attr('value');
    var text = $(this).text();
    alert('Index is: ' + index + ' and text is ' + text);
});

Upvotes: 0

Vimal Stan
Vimal Stan

Reputation: 2005

Your usage of .index() is wrong. Check out the documentation: .index()

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Instead of getting text get the value attribute using .attr().

var text = $(this).attr('value');

Upvotes: 1

Related Questions