Getting values(STRING) of ul into jquery variable

Question

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.

Reigel Gallarde · Accepted Answer · 2013-03-18 06:21:19Z

1

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>

edited Mar 18, 2013 at 6:21

answered Mar 18, 2013 at 6:16

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

s.mujahid8 Over a year ago

can you please explain me why 'value' was not working and why 'data-value' worked?

Reigel Gallarde Over a year ago

value attribute is not meant to be with <li>... it's for form elements... as to why data-value, you can read the link I provided...

Dipesh Parmar · Accepted Answer · 2013-03-18 06:14:57Z

1

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

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

answered Mar 18, 2013 at 6:14

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

Vimal Stan · Accepted Answer · 2013-03-18 06:16:33Z

0

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

answered Mar 18, 2013 at 6:16

Vimal Stan

2,0151 gold badge12 silver badges14 bronze badges

1 Comment

Vimal Stan Over a year ago

var index = $('#selt_count li').index(this);

KarSho · Accepted Answer · 2013-03-18 06:19:35Z

0

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

answered Mar 18, 2013 at 6:19

KarSho

5,74613 gold badges47 silver badges79 bronze badges

Collectives™ on Stack Overflow

Getting values(STRING) of ul into jquery variable

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related