appended list not displaying in another div when calling it with JQuery

Question

I have a select dropdown from which once you select an option and click a button it adds it to a div to display what you chose. You can keep adding options from the select dropdown.

I need the div which is holding these appended values to output what it currently has in another div. Here is my code.

<div class="col-12 col-md-7">
     <span>Select the fixture type:*</span>
           <select id="fixture-type">
                 <option>Select1</option>
                 <option>Select2</option>
                 <option>Select3</option>
           </select>
     <button class="btn-primary" type="button" id="add-fixture-btn">+ ADD FEATURE</button>
</div>
<div class="col-12 col-md-5">
     <span>Your Fixtures</span>
     <div class="append-list">
     <!--Append selection box items here-->
     </div>
</div>

Then this JQuery appends the selected options to the append-list div.

$("#add-fixture-btn").click(function() {
    $(".append-list").append('<li style="list-style: none;">' + $('#fixture-type').val() + '<div class="delete"></div>' + '</li>');
});

This part works wonderfully. Now I need append-list div to display its values in another div:

<div class="col-12 spacing">
     <h5><strong>Fixture Types</strong></h5><div id="input21"></div>
</div>

And I am using this JQuery to try to show the options:

    $("#input21").text($('.append-list'));

But instead of displaying the values from the selected options, it shows me [object Object]. What does this mean? and why is it not printing the values?

I have tried to do $("#input21").text($('.append-list').val()); and that displays nothing not even the [object Object] part. I also tried $("#input21").clone($('.append-list')); and no luck. Also did appendTo(). Did not work.

Thanks!

This doesn't answer your question, but note that li elements can only be children of an ol, ul, or menu – not a div. — Rick Hitchcock
– Rick Hitchcock, Commented Feb 16, 2018 at 19:13
$('.append-list') returns a jQuery object containing a result stack of the elements that match that class. If you try to toString() an object, which I'm almost certain text() will do, it will out put [Object object] if it doesn't know how else to turn it into a string. — Taplar
– Taplar, Commented Feb 16, 2018 at 19:14
@Taplar I am positive you are correct. How can I convert the object to strings? Or what would be the proper method for this? Is there a object() solution instead of text()? — Aries Azad
– Aries Azad, Commented Feb 16, 2018 at 19:19
You can try to text($('.append-list').html()) or you may want to use html instead of text on the outside so it doesn't show the html as text in the secondary element. But you should also take note of what Rick pointed out. Ref. html.spec.whatwg.org/multipage/… — Taplar
– Taplar, Commented Feb 16, 2018 at 19:20
@RickHitchcock Thank you I made the correction to nest the li options inside of an <ul> — Aries Azad
– Aries Azad, Commented Feb 16, 2018 at 19:28

Naga Sai A · Accepted Answer · 2018-02-16 19:28:42Z

1

To achieve expected result use

$("#input21").text($('.append-list li').text());

https://codepen.io/nagasai/pen/BYJawX

append-list li will give the exact element and text method will get you the selected text

answered Feb 16, 2018 at 19:28

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

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

Comments

Stacey Reiman · Accepted Answer · 2018-02-16 19:35:04Z

1

I'm not sure I understand what you are trying to achieve, but does this help?

$("#add-fixture-btn").click(function() {
    $(".append-list").append('<li style="list-style: none;">' + $('#fixture-type').val() + '<div class="delete"></div>' + '</li>');
    
 var html = $('.append-list').html();

console.log(html)

$("#input21").html(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 col-md-7">
     <span>Select the fixture type:*</span>
           <select id="fixture-type">
                 <option>Select1</option>
                 <option>Select2</option>
                 <option>Select3</option>
           </select>
     <button class="btn-primary" type="button" id="add-fixture-btn">+ ADD FEATURE</button>
</div>
<div class="col-12 col-md-5">
     <span>Your Fixtures</span>
     <div class="append-list">
     <!--Append selection box items here-->
     </div>
</div>

<div class="col-12 spacing">
     <h5><strong>Fixture Types</strong></h5><div id="input21"></div>
</div>

answered Feb 16, 2018 at 19:35

Stacey Reiman

7054 silver badges13 bronze badges

1 Comment

Aries Azad Over a year ago

Yes this is also what I needed! Thanks!

Collectives™ on Stack Overflow

appended list not displaying in another div when calling it with JQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related