從下拉列表中選擇列表

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