Issues in displaying child div while parent div is hidden in jquery
I am creating a script,which creates a dropdown and certain divs dynamically.Based on the dropdown value I want to display a particular child div.The Php script is shown below.
PHP Code
$status_box='<select class="lang_select" id="lang_select">
<option value=-1 selected="selected">Select Language</option>';
while($var=$db->fetchRow($res))
{
$status_box.='<option value="'.$var[0]. '" id="'.$var[0].'">'.$var[1].'</option>';
}
$status_box.='</select>';
$status_box.='<div class="phint" id="phint">
<strong>Hint</strong>
<ul class="hintul">
<li class="hintli">Lorum ipsum ipsum lorum</li>
<li class="hintli">Lorum ipsum ipsum lorum</li>
<li class="hintli">Lorum ipsum ipsum lorum</li>
</ul>
</div>';
$status_box.='<div class="allintr" id="allintr">';
for($i=1;$i<=$num;$i++)
{
$status_box.='<div class="intrtpopup_'.$i.'" id="intrtpopup_'.$i.'" ><input class="service_text" id="servicetitle_'.$i.' type="text" placeholder="Service Title " />
<div class="clear"></div>
<textarea class="edittextareapop" id=servicedesc_'.$i.' placeholder="Brief description" ></textarea>
</div>
';
$tot_id.=$i."$$";
}
$status_box.='</div>';
$status_box.='<input type="hidden" id="tot_lan" value='.$tot_id.'>';
return $status_box;
At first,before any language is selecting,default div will appers(phint).When each language is selecting the child div,based on language id will display.The jquery code for that is given below.But ,its not working.I am able to hide the default div.But the child div is not displaying.
Jquery
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#lang_select").change(function(){
var tot=$("#tot_lan").val();
var res = tot.split("$$");
var original_id=res.length-1;
for (var i=1;i<=original_id;i++)
{
$('.phint').hide();
}
var id=$(this).val();
$('.intrtpopup_'+id).show();
});
});
</script>
Anyone please help.