Question

这是我的jquery和javascript与此我有一个下拉，我可以选择文件..所以我需要的是，我必须从这个下拉列表中选择多个文件并放在新的div上下拉放置在其默认位置，我只需要选择越来越多的文件并附加到add_dd（div），点击添加更多过滤器这是我的jquery函数所以请告诉我

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

这是我的下拉列表及其中的列表

<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

好的，我理解它的方式是你希望能够从两个下拉列表中选择项目，并在单击按钮时将它们添加到另一个div。

基本上，您需要在按钮的单击事件中找到两个下拉列表中的所选项目。所以你的javascript会是这样的：

$('#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。

要将dd1_selected和dd2_selected添加到另一个div，您可以这样做：

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

Answer 2

据我了解您的问题，您是否尝试在点击后将values添加到div？

这可能会对你有帮助。

<强> 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

从Jquery中的Dropdown中选择Lists列表

2 个答案: