내 간단한 JQ 스크립트 토글이 작동하지 않습니다.

웹 사이트를 만들고 있는데 다음과 같은 문제점이 있습니다. 사용자가 내 대학에 속한다고 선택하면 관리 번호를 요청하고 div "institucion_nombre"를 숨기고 div "campos"를 표시해야합니다. 그가이 대학에 소속되어 있지 않다면 그가 속한 대학의 이름을 입력하라고 요청합니다. 즉, div "institucion_nombre"를 표시하고 div "campos"를 숨기려고합니다.내 간단한 JQ 스크립트 토글이 작동하지 않습니다.

<html> 
<head> 
<title>Welcome to website 0.1</title> 
<meta charset="utf-8"> 
<script> 
    $(function(){ 
     $("#amIfromThisUniversity_1").on("change",function(){ 
     $("#institucion_nombre").toggle(this.selectedIndex==1); 
     }); 
     $("#amIfromThisUniversity_1").change(); 
    }); 
</script> 

<script> 

    $(function(){ 
     $("#amIfromThisUniversity_2").on("change",function(){ 
     $("#institucion_nombre_2").toggle(this.selectedIndex==1); 
     }); 
     $("#amIfromThisUniversity_2").change(); 
    }); 

</script> 
</head> 
    <b><h3>Student 1</h3></b>   
     <li> 
     Name* <input id="Field0" type="text" /> 
     Middle Name <input id="Field1" type="text"/> 
      Last name <input id="Field2" type="text" /> 
     </li> 

     <li>Are you student of this university? 
      <select name="amIfromThisUniversity_1">     
       <option value="1" selected="selected" >Yes</option> 
       <option value="2" >No</option>  
       </select>  
      </li> 

      <div id="institucion_nombre">      
      <li> 
      Write your institution's name 
       <input id="Field5" name="institucion_1" type="text"/> 
     </li> 
     </div><!--Fin del nombre de la institución-->     

    <div id="campos">  
     <li> 
     Student's control number <input id="Field6" name="expediente_1" type="text" /> 
     </li>         
     </div><!--fin de los campos--> 

    <hr /> <!--separacion--> 

    <b><h3>Student 2</h3></b>   
     <li> 
     Name* <input id="Field0" type="text" /> 
     Middle Name <input id="Field1" type="text"/> 
      Last name <input id="Field2" type="text"/> 
     </li> 

     <li>Are you student of this university? 
      <select name="amIfromThisUniversity_2">     
       <option value="1" selected="selected" >Yes</option> 
       <option value="2" >No</option>  
       </select> 
      </li> 

      <div id="institucion_nombre_2">     
      <li> 
      Write your institution's name 
       <input id="Field5" type="text"/> 
     </li> 
     </div><!--Fin del nombre de la institución-->     

    <div id="campos2">  
     <li> 
      Student's control number <input id="Field6" type="text" /> 
     </li>         
     </div><!--fin de los campos--> 

    <hr /> <!--separacion-->  
</html>

모든 제안과 의견을 환영이 바이올린의 코드를 자유롭게 수정할 : http://jsfiddle.net/CcCbQ/
: 건배 당신은 잘못된 선택을 작성했습니다

출처

2013-07-20 user119177

귀하의 마크 업 ...'LI'가해야 나쁘다 'UL'또는 'OL'내에있을 경우, 'LI'이외의 요소는 'UL'또는 'OL'의 직접적인 자식이 될 수 없습니다. – prodigitalson

<select name="amIfromThisUniversity_1">

id 속성이 없습니다. 선택기가 이렇게 보일 것입니다.

$("select[name=amIfromThisUniversity_1]")

Check This fiddle

동일한 코드를이 방법 또한 리튬은 일반적으로 ol 또는 ul의 직접적인 자식하도록되어

$(function() { 
    $("select[name=amIfromThisUniversity_1]").on("change", function() { 
     $("#institucion_nombre").toggle(this.selectedIndex == 1); 
    }).change(); 

    $("select[name=amIfromThisUniversity_1]").on("change", function() { 
     $("#institucion_nombre_2").toggle(this.selectedIndex == 1); 
    }).change(); 
});

을 쓸 수 있습니다. ID 선택 당신의 선택은$("#amIfromThisUniversity_1")

을 일 것이다 - 당신의 요소가

<select id="amIfromThisUniversity_1">

라면 된 div로 교체가

유효한 당신의 HTML을합니다. 당신이 바이올린에 동일하게 복제 할 때

또한, 당신은 단지 스크립트 태그 .. 또한 jQuery를에 프레임 워크를 설정하는 데 필요한 코드 산세를 붙여 넣을 수 있습니다

출처

2013-07-20 17:09:47

내 간단한 JQ 스크립트 토글이 작동하지 않습니다.

답변

관련 문제