jQuery each function

[Mike Hemeles]

Hello,

$(function () {
    $('#selectliste').change(function () {
        var l = selectliste.options[selectliste.selectedIndex].innerHTML;
        var tous = l.split(' ');
        $.each(tous, function(index, value) {
            $("#label").html(value) + "<br>";

            return ( value !== "" );
        });
    })
});

here, I want to get the value of my select box which are in string type, after I explode the string in array, the set the value of array in label,
But, all worked wonderfully until 

$("#label").html(value) + "<br>";

 

which only retrieves the last list of my array.
How can I make to recover all the value of my array, thank you!

[dsonesuk]

You are not getting the value, but text content of option list?

Every time the loop completes a cycle it overrides the previous html, you need to add to previous, then at the end add to label html

var join = "";
                    $.each(tous, function(index, value) {
                        join += value + "<br>";
                        //return (value !== ""); ///// why?
                    });
                    $("#label").html(join);

I think this is what you are asking for?

As I said, you are using innerHTML not value, so you need to adjust this to your requirements.

instead of

 var l = selectliste.options[selectliste.selectedIndex].innerHTML;

you could use

var l = $(this).val(); // for value

or

var l = $(this).text(); // for actual text description

 

Edited September 22, 2017 by dsonesuk

[Mike Hemeles]

Thanks for your response, It's works perfectly,
 

return (value !== ""); //it was for the end of the loop, but I think it was necessary in fact

Thanks, 

And, is there a way to put an input for each label?

Edited September 22, 2017 by Mike Hemeles

[dsonesuk]

You would have to use  document.createElement('input'); then assign necessary attributes to it, then append it, OR create input as you normally would in html as a string, and append that.

[shree420]

When you are putting return inside the jQuery Each method then this is not letting the loop to run for every item. Simply remove this line. The final jQuery each code will be:

 

$(function () {
    $('#selectliste').change(function () {
        var l = selectliste.options[selectliste.selectedIndex].innerHTML;
        var tous = l.split(' ');
        $.each(tous, function(index, value) {
            $("#label").html(value) + "<br>";
            //return ( value !== "" );
        });
    })
});

 

[dsonesuk]

4 hours ago, shree420 said:

When you are putting return inside the jQuery Each method then this is not letting the loop to run for every item. Simply remove this line. The final jQuery each code will be:

 

$(function () {
    $('#selectliste').change(function () {
        var l = selectliste.options[selectliste.selectedIndex].innerHTML;
        var tous = l.split(' ');
        $.each(tous, function(index, value) {
            $("#label").html(value) + "<br>";
            //return ( value !== "" );
        });
    })
});

 

Which again! will result in showing last value in array, after overwriting all the previous.