使用jquery選擇僅css屬性顯示選擇框結果

我在下面的代碼有一個小問題。我只需要將匹配的名稱添加到#drpSelected選擇框中。但隱藏值也被添加到#drpSelected選擇框（隱藏）。因此，如果我嘗試再次搜索用戶，則#drpAvailable選擇框爲空。我嘗試了一種方法，只添加與css屬性顯示的選項：塊，但我失敗了。使用jquery選擇僅css屬性顯示選擇框結果

因此，親愛的編碼器，如何做到這一點，只有匹配的字符串或名稱被附加，留下其他選項點擊添加全部。

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>

來源

2017-05-19 Wisely D Cruizer

檢查選項，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(); 
    } 
} 
}

前

來源

2017-05-19 07:20:39

使用jquery選擇僅css屬性顯示選擇框結果

回答

相關問題