Question

我在绳子尽头。我正在开发一个具有多个多选下拉列表的项目，这些项目旨在被检查以过滤结果。我试图让复选框成为一个定制的复选框给我作为一个png，无论我尝试什么，没有任何作用。这令人沮丧，因为对于单选下拉菜单，它似乎非常容易。

我尝试了很多不同的插件，它们都做了几乎相同的事情，这似乎超越了任何替换默认的操作系统提供的复选框的尝试。这里有一些我试过的插件的例子：

multiple select
multi-select dropdown list
bootstrap multiselect

对于单选菜单，以下工作正常：

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:6px;
    height:6px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
    margin-right:12px;
}

input[type="checkbox"]:checked + label span {
    background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}

根据不同插件如何布局元素来创建下拉菜单，我调整了CSS选择器。我绝对可以移动复选框，隐藏它们等等所以我知道我正在使用正确的CSS规则。我只是不能让他们使用小精灵表。

我到处看了好几个小时，无法想出任何东西。这个难以弄清楚的小东西真的让我失去信心，因为我已经花了很多时间而不是我想承认的。任何可以帮助的人都会永远成为我眼中的圣人！

Answer 1

尝试更新..............

  $('#txtPL').keyup(function () {
        filter(this);
    });

function filter(element) {
        var value = $(element).val().toLowerCase();
        $(".customDrop > li").each(function () {
            if ($(this).text().toLowerCase().indexOf(value) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        $(".customDrop").show();
    }
  
  $( "#chkAll" ).change(function() {
  var chkAll = $(this).is(':checked');
     if (chkAll)
     $(".chkProduct").prop("checked", true);
     else
     $(".chkProduct").prop("checked", false);
});

.scrollable{
   overflow: auto;
   width: 300px; /* adjust this width depending to amount of text to display */
   height: 200px; /* adjust height depending on number of options to display */
 
 }
 .scrollable select{
   border: none;
 }
 .customDrop, customDropHeader
 {
    padding-left:0px !important;
     z-index:999999999;
     position:absolute;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     }
 .listItemPL
 {
     cursor:pointer;
     padding:5px;
        border:1px solid #94c0d2;
     list-style:none;
     border-bottom-style:none;
     background-color:#daecf4;
     
     
     }
     .listItemPL:hover
     {
   background-color: #9ED9F9;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h3>
 Type Below Developer Name
</h3>
<ul class="customDropHeader" style=" padding-left:0px; margin-bottom:0px;">
<li class="k-textbox">
<input type="text"  autocomplete="off" name="name" id="txtPL"/>
</li>
</ul>
<ul class="customDrop" style="max-height:200px; overflow-y:scroll; margin-top:2px;">
<li class="listItemPL" style=" max-width:380px; min-width:380px; ">
<label>  
<input type="checkbox" id="chkAll" onchange="SelectAll()" value="0" /> Select All</label>

</li>

<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Naresh Sharma </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Shiv kumar Shrimali </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Praksh Menaria </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Yogesh Malviya </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Vikas Jain </label>
</li>
<li class="listItemPL" style=" max-width:380px; min-width:380px;">
<label>          
<input type="checkbox" name="AllcheckedProductsPL"  class="chkProduct"  /> Neelkanth Purohit </label>
</li>
</ul>


</h1>
</h1>

Answer 2

尝试硬链接背景网址，以确保..

background:url('http://yourdomain.com/images/check_radio_sheet.png')

如果这不起作用 - 告诉我你实际使用的是哪个库，我会进一步研究。

多选下拉列表：自定义复选框

2 个答案: