Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript drop-down
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 29-Sep-12 22:37pm
Comments
Sandeep Mewara at 30-Sep-12 3:45am
   
its straightforward. Did you try? Where are you stuck? Why seek for code directly?
sivis sans at 1-Oct-12 12:27pm
   
thanks for your response i will try ,thanks a lot
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Here's a quick sample:
 
<!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>
  Permalink  
Comments
sivis sans at 1-Oct-12 12:28pm
   
thanks for your response i will try ,thanks a lot,
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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>
  Permalink  
Comments
sivis sans at 1-Oct-12 12:29pm
   
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)

  Print Answers RSS
0 OriginalGriff 200
1 PIEBALDconsult 150
2 BillWoodruff 148
3 Jochen Arndt 135
4 DamithSL 130
0 OriginalGriff 5,695
1 DamithSL 4,506
2 Maciej Los 4,007
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,190


Advertise | Privacy | Mobile
Web04 | 2.8.141216.1 | Last Updated 1 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100