仅选择带有 css 属性的复选框结果使用 jquery 显示



我在下面的代码上有一个小问题。我只需要将匹配的名称添加到 #drpSelected 选择框中。但是隐藏的值也会添加到 #drpSelected 选择框(隐藏(中。因此,如果我尝试再次搜索用户,#drpAvailable 选择框为空。我尝试了一种仅将选项附加带有 css 属性 display:block 的方法,但我失败了。

因此,亲爱的编码人员,如何做到这一点,以便仅附加匹配的字符串或名称,而其他选项则在单击"全部添加"时。

function searchFunction()
{
  
 var input, filter, select, option, optionvalue, i;
    input = $('#clientSearchName').val();
    filter = input.toUpperCase();
    select = document.getElementById("drpAvailable");
    option = select.getElementsByTagName('option');
    for (i = 0; i < option.length; i++) 
        {
            optionvalue = select.getElementsByTagName('option')[i];
            if (optionvalue.innerHTML.toUpperCase().indexOf(filter) > -1) 
            {
             option[i].style.display = "";
            } 
        else { option[i].style.display = "none"; }
        }
}
function addAllClick()
{
 $('#drpSelected').append($('#drpAvailable option').clone());
 $('#drpAvailable').html('');
}
 function removeAllClick(){
        $('#drpAvailable').append($('#drpSelected option').clone());
        $('#drpSelected').html('');
        
        
    }
#clientSearchName
{
float:left;
}
.custom
{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="clientSearchName" onkeyup="searchFunction();"/>
 <select id="drpAvailable" size="10" class="form-control" multiple>
  <option>Abby</option>
  <option>Barney</option>
  <option>kathy</option>
  <option>sonny</option>
  <option>Jack</option>
  <option>lorenzo</option>
 </select>
<div class="custom">
 <a id="btnAddAll" href="javascript:void(0);" 
 onclick="addAllClick()" class="btn btn-gray" >Add All</a><br> 
 <a id="btnRemoveAll" href="javascript:void(0);" 
     onclick="removeAllClick()" class="btn btn-gray" >Remove All</a><br> 
     </div>
 <select id="drpSelected" name="contents" size="10" class="form-control" multiple >
       <option></option>
 </select>

选中添加前display: block的选项

function addAllClick() {
 var availableOptions = $('#drpAvailable option');
 for (i = 0; i < availableOptions.length; i++) {
  var option = $(availableOptions[i]);
  if (option.css('display') == 'block') {
    $('#drpSelected').append(option.clone());
    option.remove();
  }
 }
}

最新更新