Try this..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var maleoptions=['father','brother','son'];
var femaleoptions=['mother','daughter','sister'];
function AddMaleOptions()
{
if($("#male").attr("checked"))
{
$('#female').removeAttr('checked');
for(i=0;i<femaleoptions.length;i++)
{
$("#ddl_Gender option").each(function (i, ppp) {
$(this).remove();
});
}
for(i=0;i<maleoptions.length;i++)
{
$('#ddl_Gender').append('<option value="+maleoptions[i]+">' +maleoptions[i]+ '</option>');
}
}
else
{
for(i=0;i<maleoptions.length;i++)
{
$("#ddl_Gender option").each(function (i, ppp) {
$(this).remove();
});
}
}
}
function AddfeMaleOptions()
{
if($("#female").attr("checked"))
{
$('#male').removeAttr('checked');
for(i=0;i<maleoptions.length;i++)
{
$("#ddl_Gender option").each(function (i, ppp) {
$(this).remove();
});
}
for(i=0;i<femaleoptions.length;i++)
{
$('#ddl_Gender').append('<option value="+femaleoptions[i]+">' +femaleoptions[i]+ '</option>');
}
}
else
{
for(i=0;i<femaleoptions.length;i++)
{
$("#ddl_Gender option").each(function (i, ppp) {
$(this).remove();
});
}
}
}
</script>
</head>
<body>
<input type="checkbox" value="male" id="male" onchange="AddMaleOptions()"><b>Male</b><input type="checkbox" value="male" id="female" onchange="AddfeMaleOptions()"><b>FeMale</b></br>
<select id="ddl_Gender"></select>
</body>
</html>