jquery hide() не работает в chrome

Я использую диалоговое окно jquery popup, и в этом диалоговом окне у меня есть поле ввода и выбора, я хочу скрыть некоторые опции в поле выбора, его сработал в ff, но не работал в chrome.jquery hide() не работает в chrome

<input type="text" onkeyup="search(this.value)" > 

<select id="cl_sel_l" multiple="multiple"> 
    <option value='2' id='c_2'>aa</option> 
    <option value='3' id='c_3'>bb</option> 
    <option value='4' id='c_4'>cc</option> 
    <option value='5' id='c_5'>dd</option> 
</select>

var clients = new Array(); 
clients[2] ='aa'; 
clients[3] ='bb'; 
clients[4] ='cc'; 
clients[5] ='dd'; 

function search(val) { 
    for (var i in clients) { 
     if (clients[i].toLowerCase().search(val.toLowerCase()) == -1) { 
      $("#cl_sel_l").find("#c_" + i).hide(); 
     } else { 
      $("#cl_sel_l").find("#c_" + i).show(); 
     } 
    } 
}

источник

2013-08-15 Lusi

Где определяется 'clients'? – techfoobar

Кроме того, идентификаторы должны быть уникальными, поэтому нет необходимости добавлять родительскую предпосылку. '$ ('# c_' + i) .hide();' должно быть достаточно. – BenM

Как скрыть не работает? Если этот параметр выбран, а затем вы попытаетесь скрыть этот параметр, он останется до тех пор, пока не будет выбран другой параметр (хотя он не будет отображаться в меню опций). Вероятно, у вас должен быть пустой параметр, который вы можете выбрать по умолчанию, а затем скрыть параметры, которые нужно уйти. – scrappedcola

display: none (который является то, что hide() функция JQuery делает, чтобы в соответствующих элементов) не будет работать для option элементов в надежной, кросс-браузера способом. Вместо этого вам нужно удалить их из DOM, а затем добавить их обратно после поиска.

Это немного сложно, так как вам нужно сохранить первоначальный заказ. У меня возникнет соблазн просто удалить не совпадения, а затем восстановить. Что-то вроде этого:

var clients = new Array(); 
clients[2] ='aa'; 
clients[3] ='bb'; 
clients[4] ='cc'; 
clients[5] ='dd'; 
var restore; 

function search(val) { 
    $('#cl_sel_l').html(restore); 
    for (var i in clients) { 
     if (clients[i].toLowerCase().search(val.toLowerCase()) == -1) { 
      $("#c_" + i).remove(); 
     } 
    } 
} 

$(function() { restore = $('#cl_sel_l').html(); });

Смотреть это jsFiddle

источник

2013-08-15 14:56:51 BenM

Спасибо, это работает на Chrome – Lusi

Вы можете принять ответ, если это поможет. – BenM

Я только что нашел это: http://uanguei.info/2012/08/cross-browser-solution-for-hidding-option-in-select-list/. Разве это не лучший вариант? Если у вас есть несколько элементов выбора, вам не нужно их дублировать, вы просто управляете одним списком для каждого. – Yaron

.hide() функция JQuery работает, применяя правило CSS display: none. Это правило не применимо к элементам <option>.

Вместо этого я бы предложил использовать функцию .detach(). Это позволяет удалить элемент из DOM, но также сохраняет возможность вернуть его позже, используя .appendTo().

Перед вызовом функции search(val) создайте массив из всех элементов в поле <select>. Затем проведите цикл над каждым элементом и отсоедините те, которые вы хотите скрыть.

источник

2013-08-15 14:58:20

jquery hide() не работает в chrome

ответ

Смежные вопросы