jquery .remove() problems - jquery .remove() problems

ok. 我有一个下拉菜单。如果我选择学生。应该在表单中添加一个附加字段，当我选择教师时。应删除学生特定字段，并添加教师输入字段。简而言之，如果我选择 #teacher_profile，我想删除 #student_profile，反之亦然。

这是我的代码：
爪哇语

<script>
$(function() {
    $(".fields").hide();
    $("#role").change(function() {
        switch($(this).val()){ 
            case "3":
                $(".fields").hide().parent().find("#student_profile").show();
                .find("#teacher_profile").addClass('not-active');
                break;
            case "2":
                $(".fields").hide().parent().find("#teacher_profile").show();
                .find("#student_profile").addClass('not-active');
                break;
            }
        });
    });   
    $('#submit').click(function(){
    $('div').remove('.not-active');
    });
</script>

网页表单

<form action="add" method="post"/>
<h3><a href="#">User</a></h3>
<div><input id="username" name="username"/></div>
<div><label for="password">Password </label> <input name="password" type="password"/></div>
div><label for="role">Role </label>
<select id="role" name="role" class="medium">
<optgroup label="Type of User">
<option value="3" />Student
<option value="2" />Teacher
 </optgroup>
</select>
</div>
<div id="student_profile" class="fields">
<div class="field">
<label for="type">Course</label>
<select id="type" name="stdntCourse" class="medium">
<optgroup  label="Choose Course">
<option value="BS IT" />BS IT
<option value="BS CS" />BS CS
<option value="BS IS" />BS IS
</optgroup>
</select>
</div>
</div>
<div id="teacher_profile" class="fields">
<div class="field">
<label for="type">Department/label>
<select id="type" name="stdntCourse" class="medium">
<optgroup  label="Choose Course">
<option value="BS IT" />cas
<option value="BS CS" />education
<option value="BS IS" />engineering
</optgroup>
</select>
</div>
</div>
<input type="submit" id="submit" value="Add User"/>
</form>

你的html代码相当混乱（无效）（错误的嵌套，错误的自闭合标签等）。

<form action="add" method="post">
<h3><a href="#">User</a></h3>
    <div><input id="username" name="username"/></div>
    <div>
        <label for="password">Password </label>
        <input name="password" type="password" />
    </div>
    <label for="role">Role </label>
    <select id="role" name="role" class="medium">
        <optgroup label="Type of User">
            <option value="3">Student</option>
            <option value="2">Teacher</option>
         </optgroup>
    </select>
    <div id="student_profile" class="fields">
        <div class="field">
            <label for="type">Course</label>
            <select id="type" name="stdntCourse" class="medium">
                <optgroup  label="Choose Course">
                    <option value="BS IT">BS IT</option>
                    <option value="BS CS">BS CS</option>
                    <option value="BS IS">BS IS</option>
                </optgroup>
            </select>
        </div>
    </div>
    <div id="teacher_profile" class="fields">
        <div class="field">
            <label for="type">Department</label>
            <select id="type" name="stdntCourse" class="medium">
                <optgroup  label="Choose Course">
                    <option value="BS IT">cas</option>
                    <option value="BS CS">education</option>
                    <option value="BS IS">engineering</option>
                </optgroup>
            </select>
        </div>
    </div>
    <input type="submit" id="submit" value="Add User" />
</form>

在你的jquery中，你有一些问题，因为你在错误的地方使用;，导致语法错误

这是一个简化的版本

$(function() {
    $(".fields").hide();
    $("#role").change(function() {
        switch(this.value){
            case "3":
                $(".fields").hide()
                            .filter('#student_profile')
                            .show()
                            .removeClass('not-active')
                            .end()
                            .filter('#teacher_profile')
                            .addClass('not-active');
                break;
            case "2":
                $(".fields").hide()
                            .filter('#teacher_profile')
                            .show()
                            .removeClass('not-active')
                            .end()
                            .filter('#student_profile')
                            .addClass('not-active');
                break;
                    }
    }).change();
    $('#submit').click(function(){
        $('div').remove('.not-active');
    });
});

您还需要在第一次手动调用.change()来初始化表单。

http://jsfiddle.net/gaby/qTgGY/1/的工作演示