Question

我们如何制作带复选框的下拉列表？ C＃lang是首选。

Answer 1

你做不到。不管怎样都不是真的，但你可以通过制作滚动div来伪造一个，当你点击一个按钮时出现（使用JQuery）：

<div id="cbListDiv" style="height: 172px; width:300px; overflow-y:scroll; border:1px solid silver; margin-top:8px;">
<asp:CheckBoxList id="cbList" runat="server" RepeatLayout="Flow" />
 </div>

然后，当您单击页面上的链接时，您需要添加一些代码来显示或展开该区域。这就像我想的那样接近。

Answer 2

我强烈推荐你.....

请浏览此链接..... multiselect dropdownlist in aspnet using csharp

或

您可以将jquery用于multi select dropdwon list

Answer 3

您可以将jQuery用于此目的

jQuery MultiSelect

Answer 4

我必须在工作中做这样的事情。使用javascript + HTML，我的一位同事想出了这个：

的javascript

function Achicar(control, sHeight, indexPos) {
control.style.height = sHeight;
control.style.zIndex = 0;
if (indexPos != '' && indexPos != null && indexPos != undefined) {
    control.scrollTop = (20 + (24 * parseInt(indexPos)));
} else control.scrollTop = 0;

$(control).width($(control).attr('data-width-min'));
}

function Agrandar(control, sHeight, indexPos) {
control.style.height = sHeight;
control.style.zIndex = 99999;
if (indexPos != '' && indexPos != null && indexPos != undefined) {
    control.scrollTop = (20 + (24 * parseInt(indexPos)));
} else control.scrollTop = 0;

$(control).width($(control).attr('data-width-max'));

}

function RecorerTablaPos(idtabla) {
    var vacio = true;
    var posGuardada = '';
    $('#' + idtabla + ' input[type=checkbox]').each(function () {
        if ($(this).is(':checked')) {
            vacio = false;
            var id = $(this).attr('id').split('_');
            var posActual = id[id.length - 1];
            if (posGuardada == '' || parseInt(posGuardada) > parseInt(posActual)) posGuardada = posActual;
        }
    });
    if (vacio) posGuardada = '';

    $('#' + idtabla).attr('data-indexpos', posGuardada);
}

function AtacharEvento() {
    $('.divChkLst input[type=checkbox]').click(function () {
        var idTabla = $($(this).parent().parent().parent().parent().parent()).attr('id');
        RecorerTablaPos(idTabla)
    });

    $('.divChkLst').mouseenter(function () {
        Agrandar(this, $(this).attr('data-height-max'), $(this).attr('data-indexpos'));
    })
        .mouseleave(function () {
        Achicar(this, $(this).attr('data-height-min'), $(this).attr('data-indexpos'));
    });
}

$(function () {
    AtacharEvento();
});

HTML

<div id="divEjecutivo" data-height-max="200px" data-height-min="20px" data-indexpos="" class="divChkLst" data-width-max="500px" data-width-min="500px" style="margin-top: -11px;
                                        width: 500px; height: 20px; overflow: auto; position: absolute; border: 1px solid rgb(167, 184, 193);
                                        background-color: White;">
    <div style="height: 3px;"></div> <span visible="false" style="padding-left: 8px;">Seleccione ...</span><br />
   <input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />

这与NickG提供的答案类似。

如何使用复选框制作下拉列表？

4 个答案: