Как я могу скрыть 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...
Используйте 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();
}
Попробуй это:
if ( $("#list>option").length <= 2) {
$('.zoeken-select.list').hide();
} else {
$('.zoeken-select.list').show();
}
Я проверяю прямое число детей в списке select с идентификатором. Если счетчик меньше 2, я скрываю использование метода jquery hide (неявно он просто устанавливает стиль отображения элемента равным нулю). Если нет, я показываю, используя метод jquery show (Sets display to block).