Question

我正在建立一个网站，我有以下问题。当用户选择他属于我的大学时，我会询问他的控制号码，我需要隐藏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/
:) 干杯

Answer 1

你写错了选择器..

<select name="amIfromThisUniversity_1">

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

$("select[name=amIfromThisUniversity_1]")

<强> Check This fiddle

您可以这样编写相同的代码

$(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通常应该是ol或ul的直接孩子。用div替换它们以使HTML有效

如果您的元素是

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

你的选择器会起作用。

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

我的简单JQ脚本切换不起作用

1 个答案: