CODEWITHSUNDEEP
jqueryhtmlappend
Aries Azad
Aries Azad

Reputation: 356

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

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!

Upvotes: 0

Views: 166

Answers (2)

Stacey Reiman
Stacey Reiman

Reputation: 695

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>

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

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

Upvotes: 1

Related Questions