Click here to Skip to main content
15,884,472 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
lt;Dear Sir / Madam ,>

I am new to java-script
I have two set of lists one for male list(father,brother,son) and another for female list(mother,daughter,sister) , if i select father the drop-down will show male ,if i select mother then it will be female


Provide some sample codes

Can you give some guidelines to proceed..


Thanks in Advance

Regards

Sankar
Posted
Comments
Sandeep Mewara 30-Sep-12 3:45am    
its straightforward. Did you try? Where are you stuck? Why seek for code directly?
sivis sans 1-Oct-12 12:27pm    
thanks for your response i will try ,thanks a lot

Try this..

XML
<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>
 
Share this answer
 
Comments
sivis sans 1-Oct-12 12:29pm    
thanks for your response i will try ,thanks a lot
Here's a quick sample:

XML
<!DOCTYPE html>
<html>
<head>
<script>
function onListChange(list)
{
    var option = parseInt(list.value), message;
    if (option == 0)
        message = 'Neither';
    else
        message = list.getAttribute('id');
    document.getElementById('genderTarget').innerHTML = message;
}
</script>
</head>
<body>
    <select id='Male' onchange='onListChange(this)'>
        <option value='0'>-Select a Male-</option>
        <option value='1'>Father</option>
        <option value='2'>Brother</option>
        <option value='3'>Son</option>
    </select>
    <select id='Female' onchange='onListChange(this)'>
        <option value='0'>-Select a Female-</option>
        <option value='1'>Mother</option>
        <option value='2'>Sister</option>
        <option value='3'>Daughter</option>
    </select>
    <br>
    Gender of last selection: <span id='genderTarget'></span>
</body>
<html>
 
Share this answer
 
Comments
sivis sans 1-Oct-12 12:28pm    
thanks for your response i will try ,thanks a lot,

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900