как скрыть selectbox, когда нет вариантов

0

Как я могу скрыть selectbox, когда есть менее двух вариантов? Я сделал небольшой скрипт, который автоматически добавляет опции в selectbox. Это отлично работает. Однако проблема заключается в том, что следующий selectbox отображается, даже если нет параметров для отображения. Как это исправить? Я пробовал это сам с куском кода до конца между ///////

HTML

  <div class="zoeken-select">
    <div class="zoeken-value" id="cat1">Selecteer je school/opleiding</div>
    <div class="zoeken-handle"></div>
    <select id="school" class="gui-validate">
      <option>Selecteer je school/opleiding</option>
                <option value="566342">Riemen</option>
                <option value="566347">Sjaals</option>
                <option value="566348">Tassen</option>
                <option value="566341">Kleding</option>
                <option value="566345">Sale!</option>

    </select>
  </div>
  <div class="zoeken-select course">
    <div class="zoeken-value" id="cat2">Selecteer je sector/locatie</div>
    <div class="zoeken-handle"></div>
    <select id="course" class="gui-validate">
    </select>
  </div>
  <div class="zoeken-select list" style="display:none;">
    <div class="zoeken-value" id="cat3"></div>
    <div class="zoeken-handle"></div>
    <select id="list" class="gui-validate">
    </select>
  </div>
  etc....

Jquery

// opleiding
            var courseSelection = {
             "566342": [ { value: "566343", text: "Dames riemen" },{ value: "566344", text: "Heren riemen" },],
             "566347": [ ],
             "566348": [ ],
             "566341": [ ],
             "566345": [ { value: "566346", text: "Tassen" },],

             };

            $("select#school").change(function(){

              $("select#course").html('<option value="">Kies je opleiding</option>');
              $("select#list").html('<option value="">Kies een lijst</option>');

              $("#cat1").html($("#school option:selected").text());
              $("#cat2").html('Kies je opleiding');
              $("#cat3").html('Kies een lijst');
              $("#cat4").html('Kies ');
              $("#cat5").html('Kies lijst');

              var options = '',
                  courses = courseSelection[$(this).val()];

              $('select#course').empty();

              options += '<option value="">Kies je opleiding</option>';

              $.each(courses, function() {
                options += '<option value="' + this.value + '">' + this.text + '</option>';
              });

              $('select#course').append(options);
              $('.zoeken-select.course').fadeIn(300);

            });
            // end opleiding

            // lijst
            var listSelection = {
               "566343": [ ],
               "566344": [ { value: "707274", text: "tyesr" },],
               "566346": [ ],
            };

            $("select#course").change(function(){

              $("#cat2").html($("#course option:selected").text());

              var options = '';
              lists = listSelection[$(this).val()];

              $('select#list').empty();

              options += '<option value="">Kies je lijst</option>';

              $.each(lists, function() {
                options += '<option value="' + this.value + '">' + this.text + '</option>';
              });

              $('select#list').append(options);

              ///////////////////////////////////////////
              if ( $("select#list option[value='" + options + "']").val() <= 2) { 
                $('.zoeken-select.list').hide();
              } else {
                $('.zoeken-select.list').show();
              }
              //////////////////////////////////////////
            });    
            etc...
Теги:
select
arrays

2 ответа

1

Используйте hide() как,

if ( $("select#list option").length <= 2) { //check length of options not value
    $('.zoeken-select.list').hide();// use hide() in place of show()
} else {
    $('.zoeken-select.list').show();
}
  • 0
    Если вы уже знаете значение, почему вы получаете его с помощью .val ()?
  • 0
    @ Рохан Кумар: Конечно, это должно быть скрыто (). Сделал опечатку. Это не работает, потому что поле выбора скрыто независимо от количества опций
Показать ещё 1 комментарий
0

Попробуй это:

if ( $("#list>option").length <= 2) { 
  $('.zoeken-select.list').hide();
} else {
  $('.zoeken-select.list').show();
}

Я проверяю прямое число детей в списке select с идентификатором. Если счетчик меньше 2, я скрываю использование метода jquery hide (неявно он просто устанавливает стиль отображения элемента равным нулю). Если нет, я показываю, используя метод jquery show (Sets display to block).

  • 0
    Можете ли вы добавить немного объяснения к вашему ответу, оно немного тонкое, как есть. Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню