Скрыть неактивные или отключенные элементы в списке
Я борюсь со следующей проблемой.
На моем веб-сайте WordPress у меня есть выпадающие списки фильтров.
1. ТИП АВТОМОБИЛЯ (кабриолет, купе и т.д.)
2. МАРКА (Мерседес, БМВ и т.д.)
МОДЕЛЬ 3. (CLK, X5 и т. д.)
поэтому при выборе ТИП МАШИНЫ из списка ПЕРВЫЙ,
появляется соответствующий ДЕЛАЕТ в ВТОРОЙ для выбранного элемента,
и в списке В ТРЕТЬИХ появляется модель, соответствующая СДЕЛАТЬ (Мерседес-ЦЛК, БМВ-Х5).
Теперь дело в том, что марки или модели, которые отключены или неактивны, не будут отображаться на DESKTOP, но на MOBILE они отображаются, хотя и неактивны.
1-й вопрос: Как я могу скрыть отключенные элементы из списка на МОБИЛЬНОМ?
2-й вопрос: Могу ли я отключить МАРКИ и МОДЕЛИ, если не выбран ТИП ТРАНСПОРТНОГО СРЕДСТВА?
Здесь ниже вы можете увидеть внутренний код для списка.
var car_dealer = {};
(функция ($) { /* * Очищает URL формы от пустых параметров при отправке */ $('.Форма поиска автомобиля').submit( function() { $(this).find("input[type='number']" ).filter(function(){ return ($(this).attr('min') == $(this).attr('value') || $(this).attr('max') == $(this).attr('value ' )); }).attr('отключено', 'отключено');
$(this).find( "input[type='search']" ).filter(function(){
return ! $(this).val();
}).attr( 'disabled', 'disabled' );
$(this).find( "select" ).filter(function(){
return ! ( $(this).val() && $(this).val() != '-1');
}).attr( 'disabled', 'disabled' );
})
/*
* Disables all models that do not fit the selected make
*/
$('#car_dealer_field_vehicle_type').on('change',function(){
var makeName = $(this).find( 'option:selected' ).attr( 'data-type' );
$('#car_dealer_field_make option')
// first, disable all options
.attr( 'disabled', 'disabled' )
// activate the corresponding models
.filter( '[data-type = "' + $.trim( makeName ) + '"], [value = "-1"]' ).removeAttr( 'disabled' )
// remove previous value
.parent().val( -1 );
});
$('#car_dealer_field_make').on('change',function(){
var makeName = $(this).find( 'option:selected' ).attr( 'data-make' );
$('#car_dealer_field_model option')
// first, disable all options
.attr( 'disabled', 'disabled' )
// activate the corresponding models
.filter( '[data-make = "' + $.trim( makeName ) + '"], [value = "-1"]' ).removeAttr( 'disabled' )
// remove previous value
.parent().val( -1 );
});
}(jQuery));
Я благодарен и с нетерпением жду услышать от вас в ближайшее время!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я знаю, что это старо, но здесь мы идем.
Вот обработчик события - немного переработан, чтобы иметь только один обработчик события выбора.
Теперь, что касается скрытия и отображения, просто сделайте это с соответствующим списком опций, отфильтрованных, как вы укажете, чтобы скрыть отключенные.
Используйте prop("disabled",true) для отключения, а не атрибута.
Я не упомянул, как снова включить и показать, когда это необходимо, но это просто
.find('option').prop('disabled",false).show();
(function($) {
/* * Cleans the form URL from empty parameters on submit */
$('.vehicle-search-form').on('submit', function(e) {
// might want to prevent the submit?
e.preventDefault();
$(this).find("input[type='number']")
.filter(function() {
return ($(this).attr('min') == $(this).attr('value') ||
$(this).attr('max') == $(this).attr('value'));
}).prop('disabled', true);
$(this).find("input[type='search']")
.filter(function() {
return !$(this).val();
}).prop('disabled', true);
$(this).find("select").filter(function() {
return !($(this).val() && $(this).val() != '-1');
}).prop('disabled', true);
});
// here we can create one custom event handler to do the disable
$('#car_dealer_field_make')
.on('change', function() {
var makeName = $(this).find('option:selected').data('make');
$(this).trigger("custom-set-me", [makeName, "fun"]);
});
$('#car_dealer_field_vehicle_type')
.on('change', function() {
let makeName = $(this).find('option:selected').data('type');
$(this).trigger("custom-set-me", [makeName, "fun"]);
})
// add the other one to the handler
.add("#car_dealer_field_make")
/*
* Disables all that do not fit the selected
*/
.on('custom-set-me', function(event, compareTo, param2) {) {
let iamMe = $(this);
let options = iamMe.find('option');
options
.prop('disabled', true)
// activate the corresponding models
.filter(function() {
return $(this).data('type') == $.trim(compareTo);
}).val(-1).prop('disabled', false);
// remove previous value
iamMe.val(-1);
options.filter(':diabled').hide();
});
}(jQuery));<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
С некоторым приличным HTML мы могли бы легко проверить это, вставив его туда, но я пропущу это упражнение.