从下拉列表中选择列表

Question

这是我的jQuery和JavaScript与我有一个下拉，从中我可以选择文件..所以我需要的是，我必须从这个下拉列表中选择多个文件，并放在新的div
下拉放置在其默认的地方，只是我所要做的就是选择越来越多的文件，并追加到add_dd（格）与单击添加更多的过滤器 这是我的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