раскрывающийся список фильтров jQuery

Question

Хорошо, у меня выпадающий список стран, и я хочу отображать только США и Канаду

Я смотрю на что-то подобное, но не думаю, что делаю это правильно

// Filter Countries
$('#selectId').filter(function() {
   return $('#option').val() == ('USA' || 'CANADA');   
});

Пример HTML:

<select id="country">
  <option value="AFG">Afghanistan</option>
  <option value="ALB">Albania</option>
  <option value="ALG">Algeria</option>
  <option value="CANADA">Canada</option>
  <option value="USA">United States</option>
</select>

Answer 1

|| конструкция у вас недействительна. Попробуйте это.

$(this).val() == 'USA' || $(this).val() == 'CANADA';  

---

Чтобы удалить параметры, которые не соответствуют, вы можете сделать что-то вроде этого.

$().ready( function () {
  $('#country option').filter(function() {             
     return !($(this).val() == 'USA' || $(this).val() == 'CANADA');   
  }).remove();
});    

Answer 2

Там есть несколько проблем ... вам нужно использовать правильный селектор #country, фильтр только возвращает объекты, он фактически не действует на них ... составной синтаксис ИЛИ там не работает в JS ...

Это работает (проверено):

$('#country').children().each(function() {
   if ($(this).val() != 'USA' && $(this).val() != 'CANADA') $(this).remove();   
});

Вы должны использовать метод remove (), потому что hide () не сработает для элементов option.

Answer 3

В качестве альтернативы, если в вашем списке много элементов, по которым вы хотите выполнить фильтрацию, или вы хотите изменить элементы, по которым вы фильтруете, используйте это:

// define this anywhere
Array.prototype.inArray = function (value) {
    var i;
    for (i=0; i < this.length; i++) {
        if (this[i] === value) {
            return true;
        }
    }
    return false;
};

// your choice on how to provide this list, I'm using
// something simple as an example
var want = ['USA', 'CANADA'];

// now, somewhere, this filter happens
$('#selectId').filter(function() {
   return want.inArray($('#option').val());   
});