0

当存在少于两个选项时，如何隐藏选择框？我制作了一个小脚本，可以自动将选项添加到选择框。这很好用。然而问题是即使没有选项显示，下一个选择框也会显示。如何解决？我自己尝试了这段代码，一直在 /////// 之间

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

查询

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

2 回答 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();
}
于 2013-11-12T15:41:16.583 回答
0

尝试这个 ：

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

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

于 2013-11-12T16:30:12.800 回答