把复选框放在下拉列表中

Question

我有系统生成的div标签，里面有复选框。 我希望所有的复选框div俱乐部成为单个下拉列表。 因此用户可以轻松选择。

目前我们在复选框中有10项，但将来会增加

＆＃13;

＆＃13;

$(window).load(function() 
{

$("[id=Value]").wrapAll( "<div class='wrap-div' />");

$('#unselShortList').prepend($('<dt><a href="#"><span class="hida">Select</span> <p class="multiSel"></p></a></dt>'));


$('.wrap-div').css("display","none");


$("dt a").on('click', function() {
  $(".wrap-div").slideToggle('fast');
});


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="unselShortList">
<div id="Value">
      <input type="checkbox" id="test1" name="1" data-displayvalue="tes1" value="1">
      <label for="test1">test1</label>
    </div>
    <div id="Value">
      <input type="checkbox" id="test2" name="2" data-displayvalue="test2" value="2">
      <label for="test2">test2</label>
    </div>
    <div id="Value">
      <input type="checkbox" id="test3" name="3" data-displayvalue="test3" value="3">
      <label for="test3">test3</label>
    </div>
    <div id="Value">
      <input type="checkbox" id="test4" name="4" data-displayvalue="test4" value="4">
      <label for="test4">test4</label>
    </div>
    <div id="Value">
      <input type="checkbox" id="test5" name="5" data-displayvalue="test5" value="5">
      <label for="test5">test5</label>
    </div>

    <div id="OtherValue">
      <div id="othervalue">
        <a href="javascript:{}">
            Other Value
        </a> 
      </div>

      <div id="SubmitValue">
        <div id="subdiv"> <a href="javascript:{}">Clear</a> 
        </div>
        
        </div>

＆＃13;

＆＃13;

＆＃13;