Selecting only select box results with css attribute display using jquery

Question

I have an small issue on the code below. I need to add only the matching names to the #drpSelected select box. But the hidden values too get added to the #drpSelected select box(hidden).Therefore,if i try to search for a user again, the #drpAvailable select box is empty. I tried a way to only append the options with the css attribute display:block but i failed.

So dear Coders, how can this be done so that only the matching string or name gets appended leaving the other options on clicking 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

Check the option which 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();
  }
 }
}