Зависимый Select

162

07 января 2019, 04:40

есть вот такой код который работает от value как сделать так что бы он работал от атрибута class который задан в теге option

<script>
$(document).ready(function() {
    $('#doc_name').change(function() {
        if( $(this).val() === "Паспорт" ){
            $("#select-block-1").css("display", "block");
        } else {
            $("#select-block-1").css("display", "none");
        }
    });
});
</script>
<div class="mb-3">
    <label for="doc_name">Название документа</label>
    <select name="doc_name" id="doc_name" class="doc_name form-control">
        <option class="pas" value="Паспорт">Паспорт</option>
        <option class="udv" value="Удостоверение">Удостоверение</option>
        <option class="dog" value="Договор">Договор</option>
        <option class="doc" value="Другой документ">Другой документ</option>
    </select>
</div>
<div id="select-block-1"></div>
<div id="select-block-2"></div>
<div id="select-block-3"></div>
<div id="select-block-3"></div>

Answer 1

Сделал вместо id select-block-* через data-index. Классы pas, udv и т.д. лучше тоже сделать через data атрибуты.

$(document).ready(function() { 
    $('#doc_name').change(function() { 
        $('.select-block').css('display', 'none')  
         
        const index = this.options[this.selectedIndex].className 
 
        if (!index) 
          return  
         
        $(`.select-block[data-index=${index}]`).css('display', 'block') 
    }); 
});

.select-block { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="mb-3"> 
    <label for="doc_name">Название документа</label> 
    <select name="doc_name" id="doc_name" class="doc_name form-control"> 
        <option>Не выбрано</option> 
        <option class="pas" value="Паспорт">Паспорт</option> 
        <option class="udv" value="Удостоверение">Удостоверение</option> 
        <option class="dog" value="Договор">Договор</option> 
        <option class="doc" value="Другой документ">Другой документ</option> 
    </select> 
</div> 
 
<div data-index="pas" class="select-block">1</div> 
<div data-index="udv" class="select-block">2</div> 
<div data-index="dog" class="select-block">3</div> 
<div data-index="doc" class="select-block">4</div>

Answer 2

$('#doc_name option:selected').hasClass('pas')

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Действие по клику на элемент Canvas

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

195

javascript

NodeJS синхронный get

Нужно установить getter для поляGetter должен делать запрос к базе данных

171

javascript

WebSocket в Javascript

На сервере(tcp) стоит python скрипт, на модуле socket, не могу подключиться, открываю Console в гугл хром и получается такй вывод:

147

javascript

Не отсылать запросы

Задача в следующем: На странице есть несколько блоковПри наведении мыши на блок отправляется запрос на сервер и ответ вставляется в этот...

169