Блог

Главная - Вопросы по программированию - jQuery показывает div с тем же классом, что и выбранное выпадающее значение

jQuery показывает div с тем же классом, что и выбранное выпадающее значение

#javascript #jquery #css #html

#javascript #jquery #css #HTML

Вопрос:

У меня есть выпадающий список:

 <select class="select_menu_type">
    <option value="value1">foo</option>
    <option value="value2">bar</option>
</select>

<div class="value1">Lorem ipsum VALUE1</div>
<div class="value2">Lorem ipsum VALUE2</div>

По умолчанию все div не отображаются.
Мне нужно отобразить div с тем же классом, что и выбранное значение параметра.

Есть идеи, как это сделать с помощью jQuery?

Мой прогресс до сих пор:

 jQuery('#select_order_type').change(function(){
  var selectedOption = document.getElementById('select_order_type');
  console.log(selectedOption.options[selectedOption.selectedIndex].value)
});

Мне нужно показать div с тем же классом, что и мое выбранное значение…

Комментарии:

1. Кроме того, я рекомендую использовать идентификаторы вместо классов для divs — идентификаторы используются один раз, классы предназначены для многократного использования. Если я не ошибаюсь, кажется, что эта настройка выполняется только один раз на странице.

2. используйте кнопку поиска и попробуйте выполнить поиск .load() функции и onchange события

Ответ №1:

Вы могли бы попробовать:

 $('.select_menu_type ').change(function(){
    var $Select = $(this).val();
    $('div').hide();
    $('.' $Select).show();

})

ДЕМОНСТРАЦИЯ

Ответ №2:

 $(function() {
   $('.select_menu_type').on('change',function() {
        var cls = this.value;
        $('div').hide();
        $('div.'   cls).show();
    });
});

Для лучшего кодирования я бы предложил поместить элементы div в другой div или элемент, чтобы было легче управлять только этими разделениями.

Ответ №3:

я уже пробовал это самостоятельно, надеюсь, это ответ на ваш вопрос 🙂

При первой загрузке документа нам нужно узнать, сколько опций у вас есть в вашем выборе, и мы должны скрыть все div, а затем показать div, класс которого равен выбранному значению поля выбора

 var optionValues = [];
$('.select_menu_type option').each(function() {
    optionValues.push($(this).val());
});

$( document ).ready(function() {
    for( var ctr = 0; ctr < optionValues.length; ctr  ){
        if( $('.select_menu_type').val() === optionValues[ctr]){
            $('.' optionValues[ctr]).show();
        }
        else{
            $('.' optionValues[ctr]).hide();
        }
    }
});

затем просто скопируйте готовую функцию внутри onchange этого выбора 🙂

 $('.select_menu_type').change(function(){
    for( var ctr = 0; ctr < optionValues.length; ctr  ){
        if( $('.select_menu_type').val() === optionValues[ctr]){
            $('.' optionValues[ctr]).show();
        }
        else{
            $('.' optionValues[ctr]).hide();
        }
    }
});
Метки: