변경시 JS 선택

Question

select 용 onchange 함수가 있습니다. (; & 설정되지 않은 필수 속성을 설정 & 쇼를 숨기기) onchange를, 내가 JS에 선언 된 값이 작동하지 않는 경우

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

:

$(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 입력 필드입니다. 그러나 경고를 켜면 onchange가 작동합니다. 이게 뭐가 문제 야? 당신은 jQuery를 기능 .show() 및 .hide()를 참조하고 있지만 일반 자바 스크립트를 사용하여 객체를 정의하는

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

Answer 1

: 나는이 스크립트를 가지고있다.

업데이트이 (또한 철자 오류 "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는 명령을 연결하고 모두 결합합니다.

또한 else를 사용하면 the_position == 'stud'... 두 번째 비교가 제거됩니다. 기본값입니다.