Forum Moderators: open

Message Too Old, No Replies

Automatically selecting the proper option in select box

Making Javascript select proper <option> based on hidden elements of a form

         

sawatkins

1:56 am on Sep 12, 2007 (gmt 0)

10+ Year Member



Hello,

I suspect this won't be too hard for someone who understands Javascript more than I do (I'm a PHP-er).

My issues goes something like this: I'm using a (common) drop-down system that automatically populates a second <select> box based on criteria from the first. I'm passing variables to a page using both $_GET and $_POST, and I'm putting all three variables into hidden variables like so:


print '<form action="'.$_SERVER['PHP_SELF'].'" method=post enctype="multipart/form-data" name="doc_edit">';
print '<input type="hidden" name="classid" value="'.$classid.'">';
print '<input type="hidden" name="traininglevel" value="'.$traininglevel.'">';
print '<input type="hidden" name="authlevel" value="'.$authlevel.'">';

These ("classid", "traininglevel", and "authlevel") are the options in the first drop-down. Depending on which is clicked, a second drop-down appears. The options are populated in an array like so:


critvalues[3]=['Student¦student', 'Administrator¦admin']

Finally, the fuunction "updatecritvalues" populates the second drop-down box by reading the proper string. Here is the code that makes the switch:


"function updatecritvalues(selectedcritgroup){
critvalueslist.options.length=0
if (selectedcritgroup>0){
for (i=0; i<critvalues[selectedcritgroup].length; i++)
critvalueslist.options[critvalueslist.options.length]=new Option(critvalues[selectedcritgroup][i].split('¦')[0], critvalues[selectedcritgroup][i].split('¦')[1])
}
}

Only one of those options (classid, traininglevel, authlevel) will ever be chosen. What I would like to do is to see if any of the options in the hidden fields are present, and if they are, automatically select the proper option in the drop-down box. Something like:


if (HiddenElement.value!= '') {
if (document.selectedcritgroup.this == HiddenElement.value) {
this.value.selected = true
}
}

I hope I've explained myself clearly. I've omitted a lot of code that I didn't think was necessary, or seemed obvious. I hope I didn't omit too much. The form works as-is, I just need to get those previously selected values!

To re-cap: I'm using PHP to populate hidden values in a form, and then I wish to use Javascript to read those hidden values, and if the value isn't blank, automatically select the value reflected in the hidden form.

Any help greatly appreciated! Thanks in advance,

</g>

cmarshall

11:48 am on Sep 14, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think I understand it. Here is a routine that I use. I got it from somewhere or another. It may not do exactly what you want, but I'll bet it has the raw materials.

This one takes a value (not an index), and sets the popup to the item that contains that value:

in_element
is the id of the
<select>
element, not the element itself.

function SetIndex(in_element, in_value) {
var list = document.getElementById(in_element);
if(list&&list.options.length){
for(var i=0; i<list.options.length; i++){
if(list.options[i].value == in_value){
list.selectedIndex = i;
return;
}
}
}
}