html - 使用 JQuery 和 HTML 显示下拉菜单

Question

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

这是我的 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>

到目前为止，这是我的 jQuery：

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");

我认为问题可能来自我的 ($(this).isChecked()) 行，但我不确定。谢谢！

标签： htmljquery

Answer 1

您需要实现选择标签的更改事件并更改获取常驻选项的方式

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

并更改检查选项的方式

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>