Controlled/Dependent Lists - for experts ;)

Hi

I'm now trying to have a dependent lists in a form

my form is a query based form

i.e. I fill my MySQL query from this form

I have around 30 fields/columns

each have number of values... sometimes 2 , sometimes 20.. maybe more !

I've searched the web to find a javascript code that helps me to do the dependent lists

I found few funtions.. but their work depends on INDEX !

they're very powerful functions.. i liked them.. but didn't know how to modify them until i get what i'm looking for

This is what I've found ( in two diff websites) - it's working if you copied it and pasted then tried it !

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<script type="text/javascript">

function DepSelectOne(masterSelect){

        var frm = masterSelect.form;

        this.selectedBlock = 0;

        this.selBoxes = new Array(masterSelect);

        if((frm)&&(typeof Option != 'undefined')){

                for(var c = 1;c < arguments.length;c++){

                        var selObj = frm[arguments[c]];

                        if((selObj)&&(selObj.type.indexOf('select') == 0)&&(selObj.type.indexOf('mult') < 0)&&(selObj.options.length > 2)){

                                this.selBoxes[this.selBoxes.length] = frm[arguments[c]];

                        }

                }

                if((this.selBoxes.length >1)&&(this.selBoxes.length == arguments.length)){

                        this.selectElement = this.selBoxes[0];

                        DepSelectOne.inst[this.index = this.selectElement.name] = this; //keep global record of this object instance.

                        this.selBoxes[0] = this;

                        this.optionBlock = new OptionBlock(0, this.selectElement, this.selectElement.options[0].value, this, 0);

                        this.next = new DepSelectOneNext(this.selBoxes, 1);

                        this.next.setSelection(this.optionBlock.getSelection());

                        this.selectElement.onchange = new Function('DepSelectOne.inst[\''+this.index+'\'].handleChange(0)');

                }else{

                        //alert('DepSelectOne constructor could not find\nsufficient properly configured SELECT elements\nto initialise.');

                }

        }

}

DepSelectOne.inst = {}; //Globally accessible object to hold instances of the DepSelectOne Class.

//call chain terminating functions.

DepSelectOne.prototype.validateNext = DepSelectOne.prototype.reset = DepSelectOne.prototype.setSelection = DepSelectOne.prototype.setSelectedFromChild = function(){return true;}

DepSelectOne.prototype.validate = function(){

        return ((this.optionBlock.lastSelection < 0)?false:this.next.validateNext());

}

DepSelectOne.prototype.init = function(selectedBlock){

        if(selectedBlock >= 0){

                this.optionBlock.lastSelection = selectedBlock;

        }

        if(this.optionBlock.lastSelection >= 0){

                this.optionBlock.doElement();

                if(window.setTimeout)setTimeout('DepSelectOne.inst[\''+this.index+'\'].refresh();', 5); //fix for Opera 7 timing problem. Harmless otherwise.

        }

}

DepSelectOne.prototype.handleChange = function(ind){

        this.selBoxes[ind].changed();

        if(window.setTimeout)setTimeout('DepSelectOne.inst[\''+this.index+'\'].refresh();', 5); //fix for Opera 7 timing problem. Harmless otherwise.

}

DepSelectOne.prototype.refresh = function(){

        this.selectElement.selectedIndex = this.optionBlock.lastSelection;

        this.next.reset();

}

DepSelectOne.prototype.changed = function(){

        this.optionBlock.readState();

        this.next.setSelection(this.optionBlock.getSelection());

}
 
function DepSelectOneNext(selBoxes, selBoxIndex){

        this.selectedBlock = -1;

        this.classObj = selBoxes[0];

        this.previous = selBoxes[(selBoxIndex-1)]

        this.selectElement = selBoxes[selBoxIndex];

        selBoxes[selBoxIndex] = this;

        this.selectElement.onchange = new Function('DepSelectOne.inst[\''+this.classObj.index+'\'].handleChange('+selBoxIndex+')');

        this.seperatorOption = new DepOption(this.selectElement.options[0]);

        this.optionBlocks = [];

        var startIndex = 1;

        while(startIndex < this.selectElement.options.length){

                var nextIndex = this.optionBlocks.length;

                this.optionBlocks[nextIndex] = new OptionBlock(startIndex, this.selectElement, this.selectElement.options[0].value, this, nextIndex);

                startIndex += this.optionBlocks[nextIndex].getOptionsTotal();

        }

        for(var cnt = 0,c = 0;c < this.optionBlocks.length;c++){

                this.optionBlocks[c].blockStart = cnt;

                cnt += this.optionBlocks[c].getItems();

        }

        if(++selBoxIndex < selBoxes.length){

                this.next = new DepSelectOneNext(selBoxes, selBoxIndex);

        }else{

                this.next = this.classObj;

                this.previous.init(this.selectedBlock);

        }

}

DepSelectOneNext.prototype.reset = function(){

        if((this.selectedBlock >= 0)&&(this.optionBlocks[this.selectedBlock].lastSelection >= 0)){

                this.selectElement.selectedIndex = this.optionBlocks[this.selectedBlock].lastSelection;

                this.next.reset();

        }

}

DepSelectOneNext.prototype.setSelection = function(selBlock){

        this.selectedBlock = selBlock;

        if(this.selectedBlock < 0){

                var opt = this.selectElement.options;

                opt.length = 0; //clear options

                opt[0] = this.seperatorOption.getOption();

                this.selectElement.selectedIndex = 0;

                this.next.setSelection(-1);

        }else{

                var blk = this.optionBlocks[this.selectedBlock];

                blk.doElement();

                this.next.setSelection(blk.getSelection());

        }

}

DepSelectOneNext.prototype.changed = function(){

        if(this.selectedBlock >= 0){

                var blk = this.optionBlocks[this.selectedBlock];

                blk.readState();

                this.next.setSelection(blk.getSelection());

        }

}

DepSelectOneNext.prototype.setSelectedFromChild = function(blockIndex){

        if(this.selectedBlock < 0){     //only set from OptonBlock on the first attempt.

                this.selectedBlock = blockIndex;

        }

}

DepSelectOneNext.prototype.init = function(selBlock){

        if(selBlock >= 0){

                var blockIndex = 0;

                while(!this.optionBlocks[blockIndex++].nextBlockTest(selBlock));

        }

        this.previous.init(this.selectedBlock);

}

DepSelectOneNext.prototype.validateNext = function(){

        return (((this.selectedBlock < 0)||(this.optionBlocks[this.selectedBlock].lastSelection < 0))?false:this.next.validateNext());

}
 
function DepOption(optEl){

        this.value = optEl.value;

        this.text = optEl.text;

}

DepOption.prototype.getOption = function(){

        return new Option(this.text, this.value);

}
 
function OptionBlock(startIndex, selectElement, seperatorValue, owner, blockIndex){

        this.blockStart = 0;

        this.owner = owner;

        this.index = blockIndex;

        this.selectElement = selectElement;

        this.seperators = [];

        this.optionBlock = [];

        this.lastSelection = -1;

        var opts = this.selectElement.options;

        while((startIndex < opts.length)&&(opts[startIndex].value == seperatorValue)){

                this.seperators[this.seperators.length] = new DepOption(opts[startIndex++]);

        }

        while((startIndex < opts.length)&&(opts[startIndex].value != seperatorValue)){

                if((this.lastSelection < 0)&&(opts[startIndex].selected == true)){

                        this.lastSelection = this.optionBlock.length; //record first item selected, if any.

                }

                this.optionBlock[this.optionBlock.length] = new DepOption(opts[startIndex++]);

        }

        if(this.lastSelection >= 0)this.owner.setSelectedFromChild(this.index)

}

OptionBlock.prototype.getOptionsTotal = function(){

        return (this.seperators.length + this.optionBlock.length);

}

OptionBlock.prototype.getItems = function(){

        return this.optionBlock.length;

}

OptionBlock.prototype.nextBlockTest = function(selBlock){

        if((selBlock >= this.blockStart)&&(selBlock < this.blockStart+this.optionBlock.length)){

                this.lastSelection = selBlock - this.blockStart;

                this.owner.selectedBlock = this.index;

                return true;

        }

        return false;

}

OptionBlock.prototype.getSelection = function(){

        return ((this.lastSelection < 0)?-1:(this.blockStart+this.lastSelection));

}

OptionBlock.prototype.doElement = function(){

        var opt = this.selectElement.options;

        opt.length = 0; //clear options

        if((this.lastSelection < 0)&&(this.seperators.length > 0)){

                opt[opt.length] = this.seperators[(this.seperators.length-1)].getOption();

        }

        for(var c = 0;c < this.optionBlock.length;c++){

                opt[opt.length] = this.optionBlock[c].getOption();

        }

        this.selectElement.selectedIndex = ((this.lastSelection < 0)?0:this.lastSelection);

}

OptionBlock.prototype.readState = function(){

        if(this.lastSelection < 0){

                this.lastSelection = (this.selectElement.selectedIndex - 1);

                this.doElement();

        }else{

                this.lastSelection = this.selectElement.selectedIndex;

        }

}

</script>

</head>

<body onload="new DepSelectOne(document.forms['StateCityForm'].elements['State'], 'City');">
 
<form name="StateCityForm" ACTION="" METHOD="GET" TARGET="_blank">
 
First Choose State: &nbsp;

<select name="State">

<option value="choose">choose one</option>

<option value="State_1">State 1</option>

<option value="State_2">State 2</option>

<option value="State_3">State 3</option>

</select><br><br>
 
Now Select City: &nbsp;

<select name="City">

<option value="choose">&lt;select previous first</option>

<option value="choose">select City for State_1</option>

<option value="City_A__State_1" >City A of State 1</option>

<option value="City_B__State_1" >City B of State 1</option>

<option value="City_C__State_1" >City C of State 1</option>

<option value="City_D__State_1" >City D of State 1</option>

<option value="City_E__State_1" >City E of State 1</option>

<option value="City_F__State_1" >City F of State 1</option>
 
<option value="choose">select City for State_2</option>

<option value="City_A__State_2" >City A of State 2</option>

<option value="City_B__State_2" >City B of State 2</option>
 
<option value="choose">select City for State_3</option>

<option value="City_A__State_3" >City A of State 3</option>

<option value="City_B__State_3" >City B of State 3</option>

<option value="City_C__State_3" >City C of State 3</option>

<option value="City_D__State_3" >City D of State 3</option>

</select>
 
</form>
 
</body>

</html>

this above code - is done with index.. i can't list all of mysql table values !!

let me tell you what i would like to do:

in the options of first list their should be this code:
this code will show fields available in the mysql table
[php]
<?
$sql = "SHOW FIELDS FROM myTable";
$result = mysql_query($sql);

while($row = mysql_fetch_row($result))
{?>
<option value="<?echo $row[0]?>"><?echo $row[0]?></option>
<?}
?>
[/php]

NOW .. to show values of ONE field (second list)
i use this code:
[php]
<?
$sql = "Select filed2 FROM myTable GROUP BY filed2";
$result = mysql_query($sql);

while($row = mysql_fetch_row($result))
{?>
<option value="<?echo $row[0]?>"><?echo $row[0]?></option>
<?}
?>
[/php]

In the above code, what i want is to have field2 be different depending on what user has selected in the first list

is there something like !! .. if user select item in the first list - take this item and assign it to field ?? ( so I'll use in my above code $field instead of field2 ) !!!

please help me.. I feel i'm almost there finding the right solution for this problem.. but need some help from you guys :)

P.S.1. I don't want to submit twice in the form i.e. i don't wonna sumbit first list so second list should be assigned.. i've tried that and made some other problems in my form

P.S.2. I don't want to use AJAX - .. what i need is php/html/javascript

Thanks in advance :)

Aug 14 '07 #1

Subscribe Post Reply

2315

code green

1,726

Expert 1GB

You are hacking somebody elses code to produce a solution in one go.
Fine if you know what you are doing.
Break this project into simple steps and solve each problem in turn.
You surely don't expect us to wade through this lot and make it work like you are expecting?

Aug 15 '07 #2

Controlled/Dependent Lists - for experts ;)

Similar topics