Question

我有一个简单的下拉菜单和chnage，这个另外的div将被隐藏或显示。如果选择了学校，则会显示学校名称下拉列表，如果选择私人，则会再次显示学校名称，然后隐藏学校名称。

html for this：

<div class="item">
                        <label>
                            <span>Select Your Institute type</span>
                            <select class="required" name="institutiontype" class="institutiontype">
                                <option value="private">Private</option>
                                <option value="school">School</option>
                            </select>
                        </label>
                        <div class='tooltip help'>

                            <div class='content'>
                                <b></b>

                            </div>
                        </div>
                    </div>

                    <div class="item school hidden">
                        <label>
                            <span>Select Your Institute type</span>
                            <select class="required" name="dropdown">
                                <option value="">-- Your institute Name --</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </label>
                        <div class='tooltip help'>
                            <span>?</span>
                            <div class='content'>
                                <b></b>

                            </div>
                        </div>
                    </div>

jquery：

$(document).ready(function(){
        $(".institutiontype").change(function(){
                if($(this).attr("value")=="private"){
                    $(".school").addClass("hidden")
                }
                if($(this).attr("value")=="school"){
                    $(".school").removeClass("hidden")
                }
            });
       });

和css：

.hidden{
    display: none;

}

小提琴链接http://jsfiddle.net/k8pkmxys/ 请帮帮我。

Answer 1

select标签有两个类属性。

What happens when there are multiple class attributes?

请修改如下。

<select class="required" name="institutiontype" class="institutiontype">更改为

<select class="required institutiontype" name="institutiontype">

同时使用$(this).val()代替$(this).attr('value')

$(document).ready(function () {
    $(".institutiontype").change(function () {
        if ($(this).val() == "private") {
            $(".school").addClass("hidden")
        }
        if ($(this).val() == "school") {
            $(".school").removeClass("hidden")
        }
    });
});

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <label>	<span>Select Your Institute type</span>

        <select class="institutiontype required" name="institutiontype">
            <option value="private">Private</option>
            <option value="school">School</option>
        </select>
    </label>
    <div class='tooltip help'>	<span>?</span>

        <div class='content'>	<b></b>

            <p>Choose Your Education Level Status</p>
        </div>
    </div>
</div>
<div class="item school hidden">
    <label>	<span>Select Your Institute type</span>

        <select class="required" name="dropdown">
            <option value="">-- Your institute Name --</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </label>
    <div class='tooltip help'>	<span>?</span>

        <div class='content'>	<b></b>

        </div>
    </div>
</div>

希望这有帮助

Dropdown onchange显示或隐藏div无法正常工作

1 个答案: