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/> 

電平變化時，我對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/

Answer 2

如果你想降低您的代碼，使更多的有效的，這裏是另一種方法做它：

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

function do_the_change_studfac() { 
    var the_position = $('#thechoices').val(); 
    if (the_position == 'stud'){ 
     //alert('true'); 
     $("#studcourse,#studlevel").show().attr("required","required"); 
    } 
    else if (the_position == 'fac'){ 
     //alert('false'); 
     $("#studcourse,#studlevel").hide().removeAttr("required","required"); 
    } 
} 

既然選擇了studcourse和studlevel只有在功能得到引用一次，你做的這兩個元素同樣的事情...您可以使用日e jQuery鏈接命令並將其組合在一起。

此外，當the_position =='stud'...默認值時，使用else會消除第二個比較。