0

есть вот такой код который работает от 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>

2 ответа 2

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>

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.