Multiselect выпадающий в Asp.Net

Question

У меня есть требование спроектировать раскрывающийся список с опцией множественного выбора с флажком, используя элементы управления ASP.NET, а также мне нужно установить флажки при привязке значений в раскрывающемся списке. Пожалуйста помоги

Answer 1

Пожалуйста, отметьте это, я разработал подобный выпадающий список для своего проекта.

//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>');
        }
    });

.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;
}

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

Answer 2

Вы можете использовать следующую библиотеку с открытым исходным кодом, чтобы получить свою цель, это просто и действительно удивительно

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