jquery - 下拉式onchange显示或隐藏div不起作用

我有一个简单的下拉菜单，可以更改或隐藏另一个div。如果选择了学校，则将显示学校名称下拉菜单，如果再次选择了私立，则将隐藏学校名称。

html为此：

<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/
请帮我。

最佳答案

选择标记具有两个类属性。


  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>

希望这可以帮助

关于jquery - 下拉式onchange显示或隐藏div不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28996819/