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!
