1

我正在建立一个网站，但遇到以下问题。当用户选择他属于我的大学时，我向他询问他的控制号码，我需要隐藏 div“institucion_nombre”并显示 div“campos”；如果他不属于这所大学，那么我让他输入他所属的大学的名称，即我想显示 div“institucion_nombre”并隐藏 div“campos”。

<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/
:) 干杯

4

1 回答 1

0

你写错了选择器..

<select name="amIfromThisUniversity_1">

它没有id属性。所以你的选择器应该是这样的。

$("select[name=amIfromThisUniversity_1]")

检查这个小提琴

您可以通过这种方式编写相同的代码

$(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();
});

li 通常也应该是olor的直接子代ul。将它们替换为 div 以使您的 HTML 有效

如果你的元素是

<select id="amIfromThisUniversity_1">- ID选择器 $("#amIfromThisUniversity_1")

你的选择器会起作用的。

此外，当您尝试在小提琴中复制相同内容时，您只需粘贴没有脚本标签的代码。.还需要将框架设置为 jQuery

于 2013-07-20T17:09:47.720 回答