Asp.Net中的多选下拉列表

Question

我需要使用带有复选框的多选项设置下拉列表，使用ASP.NET控件，我还需要在下拉列表中绑定值时选择复选框。请帮忙

Answer 1

您可以使用以下开源库来实现您的目标简单且非常棒

http://wenzhixin.net.cn/p/multiple-select/

Answer 2

请检查一下，我为我的项目开发了类似的下拉列表。

＆＃13;

＆＃13;

//Multiple Dropdown Select
    $('.multiDrop').on('click', function (e) {
        e.stopPropagation();
        $(this).next('ul').slideToggle();
    });

    $(document).on('click', function (){
        if (!$(event.target).closest('.wrapMulDrop').length) {
            $('.wrapMulDrop ul').slideUp();
        }
    });

    $('.wrapMulDrop ul li input[type="checkbox"]').on('change', function () {
       
        var x = $('.wrapMulDrop ul li input[type="checkbox"]:checked').length;
        if (x != "") {
            $('.multiDrop').html(x + " " + "selected");
        } else if (x < 1) {
            $('.multiDrop').html('Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>');
        }
    });

＆＃13;

.wrapMulDrop {
    width: 50%;
    display: inline-block;
    position: relative;
}
.multiDrop {
    width: 100%;
    padding: 5%;
    background-color: transparent;
    border: 1px solid #ccc;
    color: #999;
    text-align: left;
}
.multiDrop:focus {
    outline: none;
}
.wrapMulDrop ul {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: none;
}
.wrapMulDrop ul li {
  
    list-style-type: none;
    background-color: #e5801d;
    padding: 1% 6%;
}
.wrapMulDrop ul li:hover {
    background-color: #33414e;
}
.wrapMulDrop ul li label {
    width: 100% !important;
    cursor: pointer;
    margin: 0 !important;
    color: #f1f1f1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapMulDrop">
  <button type="button" class="multiDrop">Select Templates<i style="float:right;" class="icon ion-android-arrow-dropdown"></i>
  </button>
  <ul>
    <li>
      <input type="checkbox" id="list1">
      <label for="list1">Template 1</label>
    </li>
    <li>
      <input type="checkbox" id="list2">
      <label for="list2">Template 2</label>
    </li>
    <li>
      <input type="checkbox" id="list3">
      <label for="list3">Template 3</label>
    </li>
    <li>
      <input type="checkbox" id="list4">
      <label for="list4">Template 4</label>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;