Подсчет количества тегов параметров в теге выбора в jQuery

159

Как подсчитать количество <option>s в <select>элементе DOM, используя jQuery?

<select data-attr="dropdown" id="input1">
  <option value="Male" id="Male">Male</option>
  <option value="Female" id="Female">Female</option>
</select>

Я хочу узнать количество <option>тегов в <select>элементе DOM, поскольку при этом я хочу открыть панель настроек с таким количеством полей ввода с соответствующим значением параметра из раскрывающегося списка и снова изменить его в окне предварительного просмотра. панель.

Выше раскрывающийся список находится в моей панели предварительного просмотра, которая генерируется jQuery.

милость
источник

Ответы:

263
$('#input1 option').length;

Это будет производить 2.

nightingale2k1
источник
51

Решение W3C:

var len = document.getElementById("input1").length;
karim79
источник
5
Разновидностью этого метода с современным javascript будет var len = document.querySelector("#input1").length;
Джейкоб Нельсон
22

Вы можете использовать любое свойство длины, и тогда lengthоно лучше size.

$('#input1 option').length;

ИЛИ вы можете использовать функцию размера, как

$('#input1 option').size(); 

демонстрация

Sadikhasan
источник
2
Это не дает ничего такого, чего не давали ответы 2009 года.
TylerH
18

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

<div id="preview"></div>

и

$(function() {
  $("#preview").text($("#input1 option").length + " items");
});

Не уверен, что я понимаю остальную часть вашего вопроса.

Клетус
источник
14

В окне выбора нескольких параметров вы можете использовать, $('#input1 :selected').length;чтобы получить количество выбранных параметров. Это может быть полезно для отключения кнопок, если определенное минимальное количество параметров не выполнено.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}
Филипп
источник
Я обнаружил, что это работает после удаления $('#input1 :selected').length; подтверждающих документов: api.jquery.com/length
Леонард Каканде,
6

Хорошо, у меня было несколько проблем, потому что я был внутри

$('.my-dropdown').live('click', function(){  
});

У меня были кратные внутри моей страницы, поэтому я использовал класс.

Мой выпадающий список был автоматически заполнен запросом ajax, когда я щелкнул по нему, поэтому у меня был только элемент $ (this)

так...

Я должен был сделать:

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});
workdreamer
источник
6

Лучшая форма это

$('#example option').length
Рикардо Лопес Гарсия
источник
Это решение только для кода (с низкой стоимостью) было предоставлено Садихасаном 4 годами ранее. Использование lengthбыло размещено Karim79 9 лет назад. Этот ответ можно смело удалить со страницы, так как он полностью избыточен.
mickmackusa
-1

Еще один подход, который может быть полезен.

$('#select-id').find('option').length
Zak
источник
1
Вопрос не в том, чтобы подсчитывать только выбранные значения <option> .
user4642212