JS选择改变

Question

我有一个用于选择的onchange功能.

$(document).ready(function() {
    $('#thechoices').on('change', do_the_change_studfac);
});

function do_the_change_studfac() {
    var the_position = $('#thechoices').val();
    var studentcourse = document.getElementById("studcourse");
    var atudentlevel = document.getElementById("studlevel");
    //var sub = $('#submithere');

    if (the_position == 'stud'){

        //alert('true');
        studentcourse.show();
        studentlevel.show();
        studentcourse.attr("required","required");
        studentlevel.attr("required","required");

    }
    if (the_position == 'fac'){

        //alert('false');
        studentcourse.hide();
        studentlevel.hide();
        studentcourse.removeAttr("required");
        studentlevel.removeAttr("required");


    }
}

这些是我的html输入字段:

<label>Select Position</label>
<select id="thechoices" name="position">        
    <option value="stud">Student</option>
    <option value="fac">Faculty Member</option>
</select>

<label for="name">Name </label>
<input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
<label>ID Number</label>
<input type="text" name="id_num" size="8" maxlength="8" pattern="\d" placeholder="8-digits only"required />
<label>Course</label>
<input type="text" name="course" id="studcourse" placeholder="Course" required/>
<label>Level</label>
<input type="text" name="year" id="studlevel" placeholder="Level" required/>

当onchange时,我在JS上声明的值不起作用(隐藏和显示;设置和取消设置必需属性).但是,当我打开警报时,onchange确实有效.这有什么关系？我有这些脚本:

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>

Answer 1

您正在引用jQuery函数.show(),.hide()但您正在使用纯JavaScript来定义对象.

更新此(并修复拼写错误"atudentlevel"):

var studentcourse = $("#studcourse");
var studentlevel = $("#studlevel");

http://jsfiddle.net/V7Qj3/