Auto Populate Select Options

[ChaosOrb]

While doing something in HTML, I have encountered this scenario. I know it's doable because somebody on the internet already have solve this, but I want to know how would you guys code this little challenge(??) problem.

Okay here is an overview of the problem: I have two radio buttons in the form. When I select one of the option, the values inside the SELECT tag will be populated with different choices and when I select the other one, the choices on the SELECT will be different form the previous.

See below:
===============================
If option 1 is selected the values of the SELECT option are as follows:

 (*) Option 1    ( ) Option 2

Choices
+------------------------+
|-- Choice A-------------|
|-- Choice B-------------|
|-- Choice C-------------|
|-- Choice D-------------|
+------------------------+

If option 2 is selected, the values int he SELECT option are as follows

 ( ) Option 1    (*) Option 2

Choices
+------------------------+
|-- Choice 1-------------|
|-- Choice 2-------------|
|-- Choice 3-------------|
|-- Choice 4-------------|
|-- Choice 5-------------|
+------------------------+

A challenge for enthusiasts, how would you implement it? You can use: HTML | PHP | JavaScript | AJAX/JSON (if you must) | Python(?)

Good Luck!

[doomsweek]

I just did something like that recently. The only difference is that I am using two select fields. One select field depends on the value of the other.

<select class="country">
+---------------+
|Philippines    |
+---------------+

<select class="city">
+---------------+
|Cebu City      |
+---------------+

I did it using PHP and AJAX(JQuery). I think it would be easy to change it so that it'll observe a radio button instead.

$(document).ready(function() {
    $('select.country').change(function(){
        $.get('world/get_city/' + $(this).val(), null, 
            function(data, textStatus) {
                $('select.city').clear;
                $('select.city').html(data);
            }
        );
    });
});

[pokloy]

<script type="text/javascript">
//initialize checked
window.onload=function(){
obj=document.getElementById('rdb');
obj.checked=true;
obj.click(obj)
}
function changeDrop(obj){
//Optional: Assign select object to a variable but it will also work if use document.getElementById
objOption=document.getElementById('sOption');
//Find which radio selected and Process
if (obj.value=='a')
setOption2(objOption);
else
setOption1(objOption);
}

//function to populate radio Letter
function setOption1(obj){
obj.length=0;
//It is also possible to use Loop on this, to create new list of options
obj.options[0] = new Option('Choice A','Choice A');
obj.options[1] = new Option('Choice B','Choice B');
obj.options[2] = new Option('Choice C','Choice C');
obj.options[3] = new Option('Choice D','Choice D');
}
//function to populate radio number
function setOption2(obj){
obj.length=0;
//It is also possible to use Loop on this, to create new list of options
obj.options[0] = new Option('Choice 1','Choice 1');
obj.options[1] = new Option('Choice 2','Choice 2');
obj.options[2] = new Option('Choice 3','Choice 3');
obj.options[3] = new Option('Choice 4','Choice 4');
obj.options[4] = new Option('Choice 5','Choice 5');
}
</script>
<input name="rdb" type="radio" value="a" onclick="changeDrop(this);" /> Letter &nbsp;
<input name="rdb" type="radio" value="b" onclick="changeDrop(this);"/>Number
<br>
<select id="sOption"></select>

[UtOkbOlinAO]

master Chaos, naka.library ni ang mga choices?

kay kung naka.library pde ra ni tirahon sa select statement... mag.dpende ra ang imong where kung unsa nga option ang pilion sa user

[silent-kill]

use ajax if it requires getting data on the server, use plain javascript if the selections are static.

[pixelwise]

hmm i must be missing something .. why not just CSS to hide/show the select boxes based on which radio button is clicked? the select boxes can have the same name attribute.

[split_nutz]

ingon pa nla "daghan paagi unsaon pagpatay sa iring" heheh and we all know we also have our differnt approaches but i think pokloy got it right..the output is right. - cheers.

[raybanz21]

naka buhat napud mi ani nga set up but in a combo box lang. there are 2 combo box. combo box 1 has LOV then if certain value ang select kay automatic mu populate ang combox 2 with certain LOV. we used ajax and PHP. Daghan kaau paagi.

[pixelwise]

ingon pa nla "daghan paagi unsaon pagpatay sa iring" heheh and we all know we also have our differnt approaches but i think pokloy got it right..the output is right. - cheers.

yup, that goes without saying and i'm not one to challenge a working solution as it's never wrong (because it works ) ... i just think that the auto population routine should be done only once and not everytime the user clicks an option. then CSS can be used to satisfy the problem's requirement of toggling which <select> to display.

no offense to anyone and i'm not trying to be a smartass but i guess in here it's nicer to do things closer to the real world than school

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Code-Genie" />
</head>
<script language="javascript">
$ = function(id) { return document.getElementById(id) }

togglesel = function(id) {
    cons = document.getElementsByName('selcon');
    for (i = 0; i < cons.length; i++)
        cons[i].style.display = 'none';
    $(id).style.display = 'block';
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.onload = function() {
    $('opt_sel1').onclick = function() { togglesel('selcon1') }
    $('opt_sel2').onclick = function() { togglesel('selcon2') }
    
    // for short lists like these though i'd really rather have the 
    // server script generate the <option>'s in the html.
    // but assuming this is coming from an ajax fetch :) --
    models = [
        ['Luningning','Bini B Rocha'],
        ['Aida','Lorna','Fe']
        ];
    sel = document.getElementsByName('sel_subd');
    for (i = 0; i < sel.length; i++) {
        for (j = 0; j < models[i].length; j++) {
            sel[i].options[j] = new Option(models[i][j], models[i][j]);
        }
    }
    
    $('opt_sel1').click();
}
</script>
<body>
<form method="POST">
<input type="radio" name="subd" id="opt_sel1"> <label for="opt_sel1">Ma. Theresa Subd</label>
<input type="radio" name="subd" id="opt_sel2"> <label for="opt_sel2">Greenville Subd</label>
<br/><br/>
<div id="selcon1" name="selcon" style="display:block">
    Ma. Theresa House Model
    <select name="sel_subd"></select>
</div>
<div id="selcon2" name="selcon" style="display:none">
    Greenville House Model
    <select name="sel_subd"></select>
</div>
</form>
</body>
</html>

notice how the selected items in the <select> boxes are not "lost" when the user keeps changing his mind and moving from one subdivision option to another.

[pokloy]

yup, that goes without saying and i'm not one to challenge a working solution as it's never wrong (because it works ) ... i just think that the auto population routine should be done only once and not everytime the user clicks an option. then CSS can be used to satisfy the problem's requirement of toggling which <select> to display.

no offense to anyone and i'm not trying to be a smartass but i guess in here it's nicer to do things closer to the real world than school

hehehehe.. Bright jud kayo ni c pixelwise advance kayo ug thinking.. sakto man ta ni ang iya point.. and kaapan lang kay sa ako pag sabot sa question ni ChaosOrb usa raman nga <Select> ang gamiton.. So dili ka ana maka (hide&seek) hidden/visible using CSS kay you have to change the options of that same <SELECT>. Mao ni ako pagsabot.. sorry kayo ug sayop gani ako pagsabot.

Mao na ingon sa mga teacher na PLEASE READ AND FOLLOW THE INSTRUCTIONS CAREFULLY..
Mao na kinahanglan pud ta basa gamay sa Rules and Regulations sa ISTORYA.NET para di ta ma KICK-OUT.
hehehe

And in the end, it's not the years in your life that count. It's the life in your years.