javascript - Select Lists From Dropdown in Jquery

Question

this is my jquery and javascript with this i have a drop down from which i can select files.. so i need is that i have to select multiple files from this dropdown and placed on new div
dropdown placed on its default place and just i have to do is select more and more files and append to add_dd(div) with click on add more filter this is my jquery function so pls tell me

         $(".add_more_btn2").click(function () {
             var abc = '<div class="slider_slect"><div class="fl"><dl id="sample_dc_1";><dt><a href="#"><span><img class="flag" src="images/select_arrow.gif" alt="" /></span></a></dt><dd><ul><li><a href="#"><img class="flag" src="images/select_img1.gif" alt="School" title="School"/></a></li><li><a href="#"><img class="flag" src="images/select_img2.gif" alt="Grade" title="Grade" /></a></li><li><a href="#"><img class="flag" src="images/select_img3.gif" alt="Gender" title="Gender" /></a></li><li><a href="#"><img class="flag" src="images/select_img4.gif" alt="Group" title="Group" /></a></li><li><a href="#"><img class="flag" src="images/select_img5.gif" alt="Race" title="Race" /></a></li><li><a href="#"><img class="flag" src="images/select_img6.gif" alt="Teacher" title="Teacher" /></a></li><li><a href="#"><img class="flag" src="images/select_img7.gif" alt="Parent" title="Parent" /></a></li><li><a href="#"><img class="flag" src="images/select_img8.gif" alt="Student" title="Student" /></a></li></ul></dd></dl></div><div class="fl"><dl id="sample2" class="dropdown2"><dt><a href="#"><span></span></a></dt><dd><ul><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li><li><a href="#">Value Here</a></li></ul></dd></dl></div></div></br>';
             var exist = $("#add_dd").html();
             $("#add_dd").html(exist + abc);
             $(".slider_slect").append($("#add_dd"));
         });

this is my html of dropdown and lists in it

<div class="slider_slect">
    <div class="fl">
        <dl id="sample_dc_1" class="dropdown"> <dt><a href="#"><span><img class="flag" src="images/select_arrow.gif" alt="" /></span></a></dt>

            <dd>
                <ul>
                    <li><a href="#"><img class="flag" src="images/select_img1.gif" alt="School" title="School"/></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img2.gif" alt="Grade" title="Grade" /></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img3.gif" alt="Gender" title="Gender" /></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img4.gif" alt="Group" title="Group" /></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img5.gif" alt="Race" title="Race" /></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img6.gif" alt="Teacher" title="Teacher" /></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img7.gif" alt="Parent" title="Parent" /></a>
                    </li>
                    <li><a href="#"><img class="flag" src="images/select_img8.gif" alt="Student" title="Student" /></a>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <div class="fl">
        <dl id="sample_dp_1" class="dropdown2"> <dt><a href="#"><span></span></a></dt>

            <dd>
                <ul>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                    <li><a href="#">Value Here</a>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
</div>
<div id="add_dd"></div>
<div class="add_more_btn2"> <a href="javascript:;" onClick="addAnswer(); return false;">Add More Filters<span>+</span></a>

</div>

Answer 1

As far i understood your question, are you trying to add values to div once its clicked ?

This may help you.

HTML:

        <dl id="sample_dp_1" class="dropdown2"> <dt><a href="#"><span></span></a></dt>

        <dd>
            <ul>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
                <li><a href="#">Value Here</a>
                </li>
            </ul>
        </dd>
      </dl>
     <div id="add_dd"></div>

JQuery:

$('#sample_dp_1 li').click(function(){
   var data = $('#add_dd').html();
   data = data + '<li>'+ $(this).text() + '</li>';
   $('#add_dd').html(data);
});

JSFiddle