Question

我已经在这个jQuery脚本上工作了好几个小时，我找不到bug，我真的很感激帮助。欢迎所有意见和建议:)

当用户选择要插入的志愿者人数时，我的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）。我错过了一个循环还是什么？

Answer 1

您需要绑定更改事件，以使其适用于更改选择

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

Answer 2

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

1）您的代码使用.on('change', function(){}) eventhandler挂起， wrap 。

2）.val()将数据类型返回为 string ，因此您需要使用.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

Answer 3

您必须使用select id将 $（function（）{...}）; 变为 .change（function（）{...}）

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

以

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

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

Answer 4

在您的代码中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();
  }
}

Try This

我选择一个值时，我的jQuery脚本只运行一次

4 个答案: