I have write this cause to show and hide select component with jQuery, but it doesn't function, can you tell me where is the problem?
<html>
<head>
<meta charset='UTF-8' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Exo:100,200,400">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Here is CSS part to display.hide
<style type="text/css">
.hide {
display: none;
}
</style>
The jQuery code
<script>
$(document).ready(function () {
function changeType() {
if ($("#typeservice").val() == "voice") {
$("#country").show();
$("#sgnl").show();
$("#Operator").hide();
$("#tech").hide();
}
if ($("#typeservice").val() == "data") {
$("#country").show();
$("#sgnl").hide();
$("#Operator").show();
$("#tech").hide();
}
if ($("#typeservice").val() == "Radio") {
$("#country").show();
$("#sgnl").hide();
$("#Operator").hide();
$("#tech").show();
}
}
});
</script>
</head>
<body>
<select id="typeservice" style="width: 100px" onchange="changeType();">
</select>
<select id="sgnl" style="width: 100px; ">
</select>
<select id="country" style="width: 100px;">
</select>
</body>
</html>
But all the select component appears and no display or dynamic show!
In document ready function hide all select component other than typeservice dropdown. Try the following code to hide components in document ready.
$(document).ready(function(){
$("#country").hide();
$("#sgnl").hide();
$("#Operator").hide();
$("#tech").hide();
});
This question already has an accepted answer here, this is only an another method.
We can bind the onchange event of a select dropdown list using jquery
Note : it is better to use if else rather than if here
javascript
$(document).ready(function(){
$(document.body).on('change','#typeservice',function(){
if ($("#typeservice").val()=="voice") {
$("#country").show();
$("#sgnl").show();
$("#Operator").hide();
$("#tech").hide();
}
else if ($("#typeservice").val()=="data") {
$("#country").show();
$("#sgnl").hide();
$("#Operator").show();
$("#tech").hide();
}
else if ($("#typeservice").val()=="Radio") {
$("#country").show();
$("#sgnl").hide();
$("#Operator").hide();
$("#tech").show();
}
});
});
html
<select id="typeservice" style="width: 100px">
</select>
<select id="sgnl" style="width: 100px; ">
</select>
<select id="country" style="width: 100px;">
</select>