从jQuery中的下拉列表中选择列表 [英] Select Lists From Dropdown in Jquery

问题描述

这是我的jquery和javascript，我从下拉列表中可以选择文件..所以我需要的是我必须从该下拉列表中选择多个文件并放在新的div
下拉菜单放置在其默认位置，只是我需要做的是选择越来越多的文件，然后单击添加更多过滤器将其附加到add_dd(div) 这是我的jquery函数，所以请告诉我

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

这是我的下拉HTML列表，并在其中列出

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>

推荐答案

好吧，据我了解，您希望能够从两个下拉列表中选择项目，然后在单击按钮时将它们添加到另一个div中.

Ok so the way I understood it is that you want to be able to select items from two dropdowns and add them to another div when you click a button.

基本上，您需要在按钮的click事件中找到两个下拉菜单中的选定项.因此，您的JavaScript类似于:

Essentially you need to find the selected item of both dropdowns in the click event of the button. So your javascript would be something like:

$('#add_more_btn_id').click(function() {        
    dd1_selected = $( '#dropdown_1 option:selected' ).val();
    dd2_selected = $( '#dropdown_2 option:selected' ).val();
});

其中dropdown_1和dropdown_2是两个下拉菜单的id元素，add_more_btn_id是添加更多过滤器的按钮的ID.

where dropdown_1 and dropdown_2 are the id elements of the two dropdowns and add_more_btn_id is the id of the button to add more filters.

要将dd1_selected和dd2_selected添加到另一个div中，您可以执行以下操作:

To add that dd1_selected and dd2_selected to another div you could do:

$('#add_dd').append("Selected "+dd1_selected+" in DropDown1 and "+dd2_selected+" in DropDown2");

这篇关于从jQuery中的下拉列表中选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！