當我選擇一個值時，我的jQuery腳本只運行一次

我一直在研究這個jQuery腳本很多小時，我找不到錯誤，我真的很感激幫助。歡迎所有意見和建議:)當我選擇一個值時，我的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）。我錯過了一個循環或什麼？

來源

2013-07-20 Alejandro BR

以下更改工作是在你的代碼中的錯誤：

1）你的代碼是掛，包它使用.on('change', function(){})事件處理程序。

2）.val()返回爲串，所以你需要使用的數據類型.parseInt()

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

3），那麼你完整的代碼應該有===嚴格comparsion運營商。

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-20 07:31:28 Praveen

它工作得很好！ –

@AjjandroRamos我很高興能夠提供幫助。 – Praveen

真的，非常感謝！你已經解決了我的項目中的一個里程碑:) –

您需要綁定change事件以使其對選擇

$('#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-20 07:29:41 Adil

我很抱歉，但我已經嘗試過您的解決方案，並沒有奏效。 :( –

刪除}）;在行末 –

請提供「JsFiddle」。 –

你必須恰克$（函數（）{...}）;通過到.change（函數（）{...}）使用select ID

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

到

它調用，當你不得不改變你所選的選項

來源

2013-07-20 07:31:51

嗨Naveen。我已經嘗試過您的解決方案，但沒有奏效。 http://jsfiddle.net/6ZfVq/ –

在你的代碼中你的hide()你的div但是當下拉列表的值改變時你不能看到這些div - 所以你需要show()格一線

我的代碼 -

$(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

來源

2013-07-20 07:47:56

當我選擇一個值時，我的jQuery腳本只運行一次

回答

相關問題