Question

我在下面的代码中遇到了一个小问题。我只需要在#drpSelected选择框中添加匹配的名称。但隐藏的值也会添加到#drpSelected选择框（隐藏）。因此，如果我尝试再次搜索用户，则#drpAvailable选择框为空。我尝试了一种方法，只使用css属性 display：block 附加选项，但我失败了。

亲爱的Coders，如何做到这一点，只有匹配的字符串或名称才会被附加，而点击 Add All 时会留下其他选项。

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

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

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

1 个答案: