dropdown display with JQuery and HTML

Question

I would like to show the class="residential-options" when the option residential is selected.

heres my HTML:

<div class= "row">
            <select id='building'>  
                <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-floors" >
                    <label>N. of Floors *</label>
                    <input [...]>
                
                </div>
                
                <div id="number-of-basements" >
                    <label>N. of Basements *</label>
                    <input [...]>
                </div>
            
            </div>

and here's my jQuery so far:

window.onload = function() {
$('.residential-options').hide();
$('.commercial-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide();
};

$("#residential").change(function() {
    ($(this).isChecked())
    $('.residential-options').show();
    $('.commercial-options').hide();
    $('.corporate-options').hide();
    $('.hybrid-options').hide();
    });

$("#residential").trigger("change");

I think the problem might come from my ($(this).isChecked()) line but im not sure. Thanks!

Yupma · Accepted Answer · 2021-09-28 04:11:37Z

0

I think you need to watch for a change on id="Building". Once changed then check to see if the selected value is "residential"

edited Sep 28, 2021 at 4:11

Yupma

2,5322 gold badges13 silver badges35 bronze badges

answered Sep 25, 2021 at 18:54

Johnny Twoknives Krisco

115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hien Nguyen · Accepted Answer · 2021-09-28 04:18:18Z

You need implement change event of select tag and change way to get resident option as

if($(this).val() == 'residential'){
}

And change way to check option

if($(this).val() == 'residential'){
}

window.onload = function() {
$('.residential-options').hide();
$('.commercial-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide();
};

$("#building").change(function() {
    //($(this).isChecked())
    if($(this).val() == 'residential'){
    $('.residential-options').show();
    $('.commercial-options').hide();
    $('.corporate-options').hide();
    $('.hybrid-options').hide();
    }
    });

$("#residential").trigger("change");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "row">
            <select id='building'>  
                <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-floors" >
                    <label>N. of Floors *</label>
                    <input [...]>
                
                </div>
                
                <div id="number-of-basements" >
                    <label>N. of Basements *</label>
                    <input [...]>
                </div>
            
            </div>

Steve Barthelot · Accepted Answer · 2021-09-28 04:33:39Z

0

So what you did wrong is you are selecting a option(residential) in the dropdown(building). instead select the dropdown and check the value of the dropdown.

replace this

$("#residential").change(function() {
($(this).isChecked())
$('.residential-options').show();
$('.commercial-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide();
});

with this:

$("#building").change(function() {
    if($(this).val() == 'residential'){
        $('.residential-options').show();
        $('.commercial-options').hide();
        $('.corporate-options').hide();
        $('.hybrid-options').hide();
    }
});

And giving the individual options id is not needed.

answered Sep 28, 2021 at 4:33

Steve Barthelot

1271 silver badge13 bronze badges

Collectives™ on Stack Overflow

dropdown display with JQuery and HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related