Question

当存在少于两个选项时，如何隐藏选择框？我做了一个小脚本，自动为选择框添加选项。这很好用。但问题是，即使没有要显示的选项，也会显示下一个选择框。如何解决？我自己尝试使用///////

之间的代码

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...

Answer 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();
}

Answer 2

试试这个：

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

我在select with id列表下检查子项的直接数。如果计数小于2，我使用jquery的hide方法隐藏（隐式它只是将元素的显示样式设置为none）。如果没有，我使用jquery的show方法显示（将显示设置为阻止）。

没有选项时如何隐藏选择框

2 个答案: