Help needed in Multiple combo box concept

[avr1983]

hi

Iam working with the multiple combo boxes concept in which i need to select the first combo box and when it is active i need to select its respective specification in the second combo box.........can you please help me out.....

[dmjpro]

that means on changing a combo box the respective lists will come up in the second combo box....

having this assumtion i m responding u......

try to do it with AJAX..


best of luck .....
kind regards.

[pbmods]

So you want to do something like this:

|SELECT 1|

• Apple
• Orange
• Grapefruit

If the User selects 'Apples', then:
|SELECT 2|

• Juice
• Cider
• of my eye

But if the User selects 'Orange', then:
|SELECT 2|

• Juice
• Strawberry Banana
• you glad you have a sense of humor?

instead. Is this the idea?

This would be easy enough to implement; all you have to do is dynamically create the options for each select box when the onchange event fires from the previous select. In other words:

[HTML]
<select id="cat1" onchange="loadO ptions('cat2', this);">
<option ...>
</select>

<select id="cat2" onchange="loadO ptions('cat3', this);">
etc.
[/HTML]

function loadOptions(target, source) {

    var callback = function(response) {
    // Load options.
    var options = eval('(' + response  + ')');

    /*
    Assume that ajaxLoadOptions makes an ajax call and returns a JSON-format string.  E.g., assume that options = {
        one: 'juice',
        two: 'cider',
        three: 'of my eye'
    }
    */

    //  Remove options from the target.
    while(target.firstChild)
        target.removeChild(target.firstChild);

    //  Append new options.
    for(idx in options) {
        var newElement = document.createElement('option');
        newElement.setAttribute('value', idx);
        // You might be able to use newElement.text here.
        newElement.firstChild.nodeValue = options[idx];
        target.appendChild(newElement);
    }
    };

    ajaxLoadOptions(source, callback);
}

[dmjpro]

if you know the contens of combo box then it is right....
but if you want to update the list from database then it is better to use AJAX.

kind regards.

[ankitmathur]

If you want it to fetch data from database into second combox box you'd need to self-load the form with the selected value of first combo-box.

For this you can use this property:

<form id="myForm" method="get">
<select name="FruitCate gory" onchange="docum ent.getElementB yId('myForm').s ubmit()">


where myForm is ID of the the form. Also don't forget to GET the selected value of the combo-box which on self-reload would now receive the selected value.

Once you got the selected value in your reloaded GET. You can use that value to fireyour SQL query with that value as one of the inputs.

I hope it helps.

Ankit

[dmjpro]

u can do it of course by submitting the page.

but if u use AJAX then u need not to reload the page fully.... only update the changes u want ....

kind regards.

[avr1983]

Thank You for your reply.........I will try the code.

[avr1983]

hi,

Please help me in writing the html code for second combo box and where it should be placed......... .........

[acoder]

hi,

Please help me in writing the html code for second combo box and where it should be placed......... .........

See this link