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

Question

我在下面的代码中遇到了一个小问题。我只需要将匹配的名称添加到#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>

Answer 1

勾选display: block before add

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();
  }
 }
}