0

我已经在这个 jQuery 脚本上工作了好几个小时，但我找不到错误，我非常感谢帮助。欢迎大家提出意见和建议：）

当用户选择要插入的志愿者数量时，我的 jQuery 脚本应该显示正确的志愿者数量，但由于某种原因它只显示三个。这是代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>

$(function(){

var number= $('#integrantes :selected').val();

if(number==3){
  $("#loscuatro").hide();
  $("#loscinco").hide();   
  $("#losseis").hide();   
  $("#lossiete").hide();   
  $("#losocho").hide();   
  $("#losnueve").hide();         
  $("#losdiez").hide();   

}else if(number==4){
  $("#loscinco").hide();   
  $("#losseis").hide();   
  $("#lossiete").hide();   
  $("#losocho").hide();   
  $("#losnueve").hide();   
  $("#losdiez").hide();   

}else if(number==5){
  $("#losseis").hide();   
  $("#lossiete").hide();   
  $("#losocho").hide();   
  $("#losnueve").hide();   
  $("#losdiez").hide();   

}else if(number==6){   
  $("#lossiete").hide();  
  $("#losocho").hide();   
  $("#losnueve").hide();   
  $("#losdiez").hide();       

} else if(number==7){
  $("#losocho").hide();   
  $("#losnueve").hide();   
  $("#losdiez").hide();
}else if(number==8){
  $("#losnueve").hide();   
  $("#losdiez").hide();    

}else if(number==9){
  $("#losdiez").hide();
}
});

</script>
</head>
<body>
  <div id="container" class="ltr">    

           Number of team members 
                    <select name="integrantes" id="integrantes" >                
                <option  name="members"  value="3"   id="muestras" >3</option>
            <option  name="member4"  value="4"   id="muestra4">4</option>
        <option  name="member5"  value="5"   id="muestra5">5</option>
        <option  name="member6"  value="6"   id="muestra6">6</option>
        <option  name="member7"  value="7"   id="muestra7">7</option>
        <option  name="member8"  value="8"   id="muestra8">8</option>
        <option  name="member9"  value="9"   id="muestra9">9</option>           
        <option  name="member10"  value="10"   id="muestra10">10</option>

            </select>

 <h3>Volunteer 1</h3>
Name* <input id="Field0" />

 <h3>Volunteer 2</h3>
    Name* <input  />

 <h3>Volunteer 3</h3>
    Name* <input  />

<div id="loscuatro">  
<h3>Volunteer 4</h3>
    Name* <input  />

  <div id="loscinco">
<h3>Volunteer 5</h3>
    Name* <input  />

  <div id="losseis">
<h3>Volunteer 6</h3>
    Name* <input  />        

  <div id="lossiete">
<h3>Volunteer 7</h3>
    Name* <input  />  

  <div id="losocho">
<h3>Volunteer 8</h3>
    Name* <input  />                

  <div id="losnueve">
<h3>Volunteer 9</h3>
    Name* <input  />          

  <div id="losdiez">
<h3>Volunteer 10</h3>
    Name* <input  />  

   </div><!--fin de los diez-->                 
   </div><!--fin de los nueve-->                 
   </div><!--fin de los ocho-->                 
   </div><!--fin de los siete-->                 
   </div><!--fin de los seis-->         
   </div><!--fin de los cinco--> 
 </div><!--end of volunteer loscuatros-->   

</body>
</html>

我认为这不起作用，因为当页面加载时，它会自动加载第一个值（值 3）。我错过了一个循环还是什么？

4

4 回答 4

2

您需要绑定更改事件以使其在选择更改时起作用

$('#integrantes').change(function(){

    var number= $('#integrantes :selected').val();

    if(number==3){
      $("#loscuatro").hide();
      $("#loscinco").hide();   
      $("#losseis").hide();   
      $("#lossiete").hide();   
      $("#losocho").hide();   
      $("#losnueve").hide();         
      $("#losdiez").hide();   

    }else if(number==4){
      $("#loscinco").hide();   
      $("#losseis").hide();   
      $("#lossiete").hide();   
      $("#losocho").hide();   
      $("#losnueve").hide();   
      $("#losdiez").hide();   

    }else if(number==5){
      $("#losseis").hide();   
      $("#lossiete").hide();   
      $("#losocho").hide();   
      $("#losnueve").hide();   
      $("#losdiez").hide();   

    }else if(number==6){   
      $("#lossiete").hide();  
      $("#losocho").hide();   
      $("#losnueve").hide();   
      $("#losdiez").hide();       

    } else if(number==7){
      $("#losocho").hide();   
      $("#losnueve").hide();   
      $("#losdiez").hide();
    }else if(number==8){
      $("#losnueve").hide();   
      $("#losdiez").hide();    

    }else if(number==9){
      $("#losdiez").hide();
    }
    });
});
于 2013-07-20T07:29:41.963 回答
1

以下是您的代码中的错误：

1）您的代码挂起， 使用事件处理程序包装它.on('change', function(){})。

2）.val()将数据类型返回为字符串，因此您需要使用.parseInt()

var number= parseInt($('#integrantes :selected').val());

3）那么你的完整代码应该有===严格的比较运算符。

4）一旦你隐藏其他，使用.show()需要的id. 

$(function () {
    $('#integrantes').on('change', function () {
        var number = parseInt($('#integrantes :selected').val());
        console.log(number);
        if (number === 3) {
            $("#loscuatro").hide();
            $("#loscinco").hide();
            $("#losseis").hide();
            $("#lossiete").hide();
            $("#losocho").hide();
            $("#losnueve").hide();
            $("#losdiez").hide();

        } else if (number === 4) {
            $("#loscuatro").show();
            $("#loscinco").hide();
            $("#losseis").hide();
            $("#lossiete").hide();
            $("#losocho").hide();
            $("#losnueve").hide();
            $("#losdiez").hide();

        } else if (number === 5) {
            $("#loscuatro").show();
            $("#loscinco").show();
            $("#losseis").hide();
            $("#lossiete").hide();
            $("#losocho").hide();
            $("#losnueve").hide();
            $("#losdiez").hide();

        } else if (number === 6) {
            $("#loscuatro").show();
            $("#loscinco").show();
            $("#losseis").show();
            $("#lossiete").hide();
            $("#losocho").hide();
            $("#losnueve").hide();
            $("#losdiez").hide();

        } else if (number === 7) {
            $("#loscuatro").show();
            $("#loscinco").show();
            $("#losseis").show();
            $("#lossiete").show();
            $("#losocho").hide();
            $("#losnueve").hide();
            $("#losdiez").hide();
        } else if (number === 8) {
            $("#loscuatro").show();
            $("#loscinco").show();
            $("#losseis").show();
            $("#lossiete").show();
            $("#losocho").show();
            $("#losnueve").hide();
            $("#losdiez").hide();

        } else if (number === 9) {
            $("#loscuatro").show();
            $("#loscinco").show();
            $("#losseis").show();
            $("#lossiete").show();
            $("#losocho").show();
            $("#losnueve").show();
            $("#losdiez").hide();
        }
    });
});

检查这个JSFiddle

于 2013-07-20T07:31:28.887 回答
0

你必须改变$(function(){...}); 使用 select id更改为.change(function(){...})

$(function(){
....
});

到

$('#integrantes').change(function(){
....
});

当您必须更改所选选项时，它会调用

于 2013-07-20T07:31:51.570 回答
0

在您的代码中，您是hide()您的div，但是当下拉列表的值发生更改时，您不会使这些 div 可见-因此您需要先进行show()div-

我的代码 -

$(document).ready(function(){
   DdlChange();
});

function DdlChange(){    
    var number= $('#integrantes :selected').val();
    $('.Showit').show(); //-- Show all div first
    if(number==3){
     $("#loscuatro").hide();
     $("#loscinco").hide();   
     $("#losseis").hide();   
     $("#lossiete").hide();   
     $("#losocho").hide();   
     $("#losnueve").hide();         
     $("#losdiez").hide();       
   }
   else if(number==4){
    $("#loscinco").hide();   
    $("#losseis").hide();   
    $("#lossiete").hide();   
    $("#losocho").hide();   
    $("#losnueve").hide();   
    $("#losdiez").hide();
  }
  else if(number==5){
    $("#losseis").hide();   
    $("#lossiete").hide();   
    $("#losocho").hide();   
    $("#losnueve").hide();   
    $("#losdiez").hide();
  }
  else if(number==6){   
    $("#lossiete").hide();  
    $("#losocho").hide();   
    $("#losnueve").hide();   
    $("#losdiez").hide(); 
  } 
  else if(number==7){
    $("#losocho").hide();   
    $("#losnueve").hide();   
    $("#losdiez").hide();
  }
  else if(number==8){
    $("#losnueve").hide();   
    $("#losdiez").hide(); 
  }
  else if(number==9){
    $("#losdiez").hide();
  }
}

试试这个

于 2013-07-20T07:47:56.470 回答