Я делаю раскрывающийся список и хочу показать div class = "living-options", когда выбран id = "residence", и показать div class = "Commercial-options", когда выбран id = "Commercial".

Вот мой HTML:

<div class= "row">
                <select id='building-type'>  
                    <option disabled selected value> -- select an option -- </option>
                    <option id="residential" value="residential" [...]>Residential</option>
                    <option id="commercial" value="commercial " [...]>Commercial</option>
                    <option id="corporate" value="corporate" [...]>Corporate</option>
                    <option id="hybrid" value="hybrid" [...]>Hybrid</option>

                </select>    
            </div>

        

            <div class="residential-options">

                <div id="number-of-apartments" >
                        <label>N. of Apartments *</label>
                        <input [...]>
                </div>                
             
                
                <div id="number-of-basements" >
                    <label>N. of Basements *</label>
                    <input [...]>
                </div>
            
            </div> 

            <div class="commercial-options">

                <div id="number-of-floors" >
                        <label>N. of Floors *</label>
                        <input [...]>
                </div>

Вот мой jQuery:

$("#building-type").change(function() {
    ($('#residential').is(':checked'))
    $('.residential-options').show();
    $('.commercial-options').hide();
    $('.corporate-options').hide();
    $('.hybrid-options').hide()
    });
$("#building-type").trigger("change");

$("#building-type").change(function() {
    ($('#commercial').is(':checked'))
    $('.commercial-options').show();
    $('.residential-options').hide();
    $('.corporate-options').hide();
    $('.hybrid-options').hide()
    });
$("#building-type").trigger("change");

Он показывает только div class = "Commercial-options", на что я нажимаю. Спасибо за вашу помощь!

0
TLS 25 Сен 2021 в 23:39

2 ответа

Лучший ответ

Ваш код можно значительно упростить, включая удаление вызовов .trigger().

$("#building-type").change(function() {
    $('div[class*="options"]').hide(); // hide all '*-option' divs
    // Determine which option was selected and display the corresponding div:
    ['residential', 'commercial', 'corporate', 'hybrid'].forEach(function(base){
        if ($('#' + base + ':checked').length) {
            $(`.${base}-options`).show();
        }
    })
})
0
kmoser 25 Сен 2021 в 21:08

Вы можете изменить свой код примерно так: - получить выбранное значение из типа здания. сравните значение с помощью операторов if, else if и внутри операторов if / else if, отображающих и скрывающих ваш div с помощью атрибута class.

0
Hashmat Jibran 25 Сен 2021 в 20:48