Подсчет количества опций в раскрывающемся списке выбора (несколько на одной странице)

Ответ 1

Использование селектора ".drop option" получит все элементы option под (не обязательно прямые дочерние элементы) элемента с классом ".drop".

Обратите внимание, что это относится не только к элементу select, но и к этому:

<div class="drop">
    <select>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
</div>

$('.drop option').length // 3

Чтобы обеспечить сохранение элементов <option> дочерних элементов <select class="drop">, используйте селектор children >:

$('.drop > option');

Чтобы получить отдельно количество опций для каждого выбора, сначала выберите <select>, а затем подсчитайте для каждого из них. Вы можете сделать что-то вроде:

var optionsArr = $('select.drop').map(function() {
                     return $(this).find('option:not(:disabled)').length;
                 }).toArray();

Это приведет к возврату массива с различными суммами: [1, 3]

DEMO

Чтобы добавить div с текстом "3 даты (ов)", сделайте следующее:

$('select.drop').each(function() {
    // the current select.drop
    var $this = $(this);
    // create a div with the text you want
    $('<div>' + $this.find('option:not(:disabled)').length + ' date(s) available</div>')
        // append it after the current select.drop
        .insertAfter($this);
});

///////////////////////

Хорошо, почти там! Еще раз спасибо за ваше время на этом...

Я включил код и делаю то, что хочу, но из-за того, что он все в Аккордеоне, он каждый раз забирает каждый элемент аккордеона. Смотрите скриншот (стиль отмазки):

Мне просто нужно, чтобы теперь был только цикл для выбора drop в этом аккордеоне, а не для каждого.

Кроме того, в моем выборе "Отмена" у меня есть первый вариант "Отключено" как часть проверки, так что пользователь должен выбрать элемент перед продолжением, например:

<option disabled="disabled"></option>

Javascript также считает это. Итак, есть ли способ, по которому мы можем поставить -1 в результат, или есть лучший способ сделать это, что мне не хватает?

Еще раз спасибо...

Ответ 2

Описание

Вы получаете 4, потому что ваш селектор jQuery соответствует всем параметрам на вашей странице.

Основной вопрос: select вы хотите подсчитать?

Лучшее, для оптимизации поисковых систем (например), вы даете выделение разных идентификаторов. Но вы можете использовать другие селектора jQuery, такие как :eq(), :first, :last или другие. Это зависит от того, что вы хотите сделать.

Примеры

Различные идентификаторы

<select id="select1" name="select" class="drop">
   <option name="option" value="Option 1"></option>
</select>

<select id="select2" name="select" class="drop">
   <option name="option" value="Option 1"></option>
   <option name="option" value="Option 2"></option>
   <option name="option" value="Option 3"></option>
</select>

<span class="date_number"/>

$(function() {
  $(".date_number").text($("#select2 option").length + " items")
});

Отъезд демонстрация jsFiddle

: последний селектор

$(function() {
    $(".date_number").text($(".drop:last option").length + " items")
});

Отъезд демонстрация jsFiddle

Дополнительная информация

• jQuery Селектор

Ответ 3

Это очень просто, вам нужно только получить значение длины из опции: selected, например:

$('. drop option: selected'). length

Надеюсь, это будет полезно.

Ответ 4

Поскольку у вас нет уникального идентификатора для каждого выбора, вам нужно сделать что-то вроде:

$('.drop').text( function(){
  console.log($(this).select('option').length);
  // instead of console.log return the text you want
  // return $(this).select('option').length + " items";
});

Что это делает для каждого .drop-класса, он выполняет определенную функцию. Функция находит все элементы в пределах $(this). $(this) - текущий элемент класса .drop.

И $('. drop') будет запущен для каждого найденного класса .drop.