JavaScript - Changing Html Select Options Based On Other Selection With Javascript And Php

Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:
Code:

ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:
Code:

ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:
Code:

Red

// Select 2:
Code:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated.

cursor:
Quote:
cursor bldglistc
is
select stvbldg_code,
stvbldg_desc,
slbbldg_street_line1,
slbbldg_city,
slbbldg_stat_code,
slbbldg_zip
from stvbldg, slbbldg
where stvbldg_code = slbbldg_bldg_code (+)
and stvbldg_desc not like 'DNU%'
and stvbldg_desc not like 'Online%'
order by slbbldg_bldg_code;

bldg_record bldglistc%ROWTYPE;
Javascript in package:
Quote:
htp.p('
<SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript">
function UpdateNextField(which1,which2,fld1,fld2) {
document.getElementById(fld1).value = which1.value;
document.getElementById(fld2).value = which2.value;
}

</SCRIPT>
');
Form code from package:
Quote:
HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post');
twbkfrmt.P_FormHidden ('atyp', atyp);
twbkfrmt.P_FormHidden ('seqno', seqno);


twbkfrmt.p_tableopen (
'DATAENTRY',
cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."')
);
twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5');
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'),
idname => 'street_line1_input_id'
)
);
twbkfrmt.p_tabledataopen (ccolspan => '5');
HTP.formselectopen (
'str1',
'',
1,
cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"'
);


OPEN bldglistc;

LOOP
FETCH bldglistc INTO bldg_record;

IF bldglistc%NOTFOUND
THEN
EXIT;
END IF;

IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1
THEN
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1,
'selected'
);
ELSE
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1
);
END IF;
END LOOP;

CLOSE bldglistc;

HTP.formselectclose;
twbkfrmt.p_tabledataclose;
twbkfrmt.p_tablerowclose;


twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'),
idname => 'street_line2_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'str2',
70,
75,
address_rec.spraddr_street_line2,
cattributes => 'ID="street_line2_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'),
idname => 'zip_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'zip',
NULL,
30,
address_rec.spraddr_zip,
cattributes => 'ID="zip_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tableclose;
HTP.para;
--
HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit'));
HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset'));
HTP.formclose;

I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries.

I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000.

Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items.

Any help would be appreciated. Thanks.

I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined"

The code below is part of a PHP script (thus \" instead of ")
I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed.

Here is what I have
Code:

<tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
<option selected=\"selected\" value=\"\">Select Race</option>\n";
$sql = mysql_query("SELECT * FROM races");$i=1;
while ($row = mysql_fetch_array($sql)){
	$output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n";
	$i++;
}
$output .= "</select></td>
<td><div id=\"ExtraInfo\">Select Race</div></td></tr>

Any help will be greatly appreciated.

I found a solution to my problem:
by replacing:
Code:

<select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">

with this:
Code:

<select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\">

I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks
js code
Code:

var sel = document.getElementById("sw");
function f1(){
   var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
   var im = document.getElementById("pic");
   im.src = imgs[this.selectedIndex]; 
}

html code
Code:

<img id="pic" src="chart1.cgi" />

<select name="sw" id="sw" onchange = "f1()" >
   <option value="s1">what</option>
   <option value="s2">whatever 2</option>
   <option value="s3">whatever 3</option>
   <option value="s4">whatever 4</option>
</select>

CHANGE XX to TT
CHANGE zero in c0m to O becoming com
CHANGE YYY to WWW

hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ

first an example of what im trying to do:
when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically.
this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways.

Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself.

How do I fix it?


Thank you!!!!

Hello!

I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as:

<select name="distance" id="jr_radius">
<option value="0.5">0.5 Miles</option>
<option value="1">1 Mile</option>
<option value="3" selected="selected">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>

So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right.

Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5".

Does that make sense? Any help will be greatly appreciated!

If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?

Hi all,
I have table in Javascript and it has addrow, deleterow, submit, and functions.
when i click it automatically adds new row and it has select option to choose some of them
for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte.

So i need once i select the name from combobox, should not allow user to select same name in coming rows

Here is my code.

Thanks beforehands


PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head><title>dinamik sheet</title> 
<script>  
var i=iteration; 
function addrow(){ 
    var tbl = document.getElementById('sheet'); 
    var iteration = tbl.rows.length; 
document.getElementById('count_rows').value = iteration; 
    var row=tbl.insertRow(iteration); 
  
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 
  
    var cellRight = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'txtRow'+iteration; 
    el.id = 'txtRow'+iteration; 
    el.size = 15; 
    el.value = '0'; 
    el.onblur = sum; 
    cellRight.appendChild(el); 
  
    var cellRight = row.insertCell(2); 
    var elaz = document.createElement('input'); 
    elaz.type = 'text'; 
    elaz.name = 'txtRowaz'+iteration; 
    elaz.id = 'txtRowaz'+iteration; 
    elaz.size = 20; 
    elaz.value = '0'; 
    elaz.onblur = sum; 
    cellRight.appendChild(elaz); 
  
  
  
    var cellRight1 = row.insertCell(3); 
    var ela = document.createElement('input'); 
    ela.type = 'text'; 
    ela.name = 'txtRowe'+iteration; 
    ela.id = 'txtRowe'+iteration; 
    ela.size = 20; 
    ela.value = '0'; 
    ela.onblur = sum; 
    cellRight1.appendChild(ela); 
  
    var cellRightsel = row.insertCell(4); 
    var sel = document.createElement('select'); 
    sel.name = 'selRow' + iteration; 
    sel.id = 'selRow' + iteration; 
    sel.onchange = sum; 
    sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); 
    sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); 
    sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); 
    sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); 
    sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); 
    sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); 
    cellRightsel.appendChild(sel); 
    sum(); 
} 
function removeRowFromTable() 
{ 
  var tbl = document.getElementById('sheet'); 
  var lastRow = tbl.rows.length; 
  if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
  
function sum(){ 
    var s1 = 0; 
    var s2 = 0; 
    var tbl=document.getElementById('sheet'); 
    var iteration=tbl.rows.length-1; 
    for(var i=1; i<=iteration; i++){//loop through table rows 
        var el1 = document.getElementById('txtRow'+i);//Row's Income field 
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu 
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell 
        var elaz=document.getElementById('txtRowaz'+i); 
  
        if(!el1 || !el2 || !ela||!elaz) continue; 
        var txt = el1.value; 
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries 
  
var tax = Number(txt) * Number(130); 
  
if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ 
    var  tax = Number(txt) * Number(150); 
  
  
} 
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ 
    var  tax = Number(txt) * Number(100);     
  
} 
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ 
    var  tax = Number(txt) * Number(85);     
  
} 
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ 
    var  tax = Number(txt) * Number(95);     
  
} 
if (el2[el2.selectedIndex].value=="GraphigCard ATI") 
{ 
  
        var tax = Number(txt) * Number(88); 
} 
  
        ela.value = tax.toFixed(2); 
        elaz.value=tax.toFixed(2)/Number(txt); 
        if(isNaN(elaz.value)){ 
        elaz.value=0; 
        } 
        s1 += Number(txt); 
        s2 += tax; 
  
} 
    var t1 = document.getElementById('total'); 
    var t2 = document.getElementById('taxtotal'); 
    if(t1){ t1.value = s1.toFixed(2); } 
    if(t2){ t2.value = s2.toFixed(2); } 
} 
  
onload = function(){ 
    addrow(); 
} 
</script> 
</head> 
<body> 
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> 
<table align="center" width="75%"> 
<tr> 
<td align="center">Balance sheet</td></tr> 
<tr> 
<td align="center"> 
    <table id="sheet" border="1"> 
    <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> 
  
    </table> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input type="hidden" name="count_rows" id="count_rows" /> 
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRowFromTable()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /><br /> 
</td> 
</tr> 
<tr> 
<td align="left"> 
<input id="total" name="total" type="text"/>total amount of products<br /> 
<input id="taxtotal" name="taxtotal" type="text"/>total price of products 
</td> 
</tr> 
</table> 
</form> 
  
</body> 
</html> 

This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you.

Code:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function removeOptionSelected(b,j)
                {
                  var elRem = document.getElementById(b);
                  var elAdd = document.getElementById(j);
                  var elOptNew = document.createElement('option');
                  var i;
                  for (i = elRem.length - 1; i>=0; i--) {
                    if (elRem.options[i].selected) {
                        //alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
                        elOptNew.text = elRem.options[i].text;
                        elOptNew.value = elRem.options[i].value;
                        try {
                            elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
                        }
                            catch(ex) {
                            elAdd.add(elOptNew); // IE only
                        }
                        elRem.remove(i);
                    }
                  }
                }
        </script>
        <style type="text/css">
            div {
                float: left;
                /*border: 1px solid black;*/
            }
            div.contain {
                width: 536px;
                height: 500px;
                border: none;
            }
            div.side {
                width: 215px;
                height: 500px;
            }
            div.middle {
                width: 100px;
                height: 300px;
                padding-top: 200px;
            }
            select {
                width: 200px;
                height: 500px;
            }
            input {
                width: 82px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="contain">
            <div class="side">
                <form name="left">
                    <select id="left" class="left" multiple name="out">
                        <option value="apple">apple</option>
                        <option value="banana">banana</option>
                        <option value="orange">orange</option>
                        <option value="tangerine">tangerine</option>
                        <option value="pineapple">pineapple</option>
                        <option value="carrot">carrot</option>
                        <option value="grapefruit">grapefruit</option>
                        <option value="plum">plum</option>
                        <option value="blueberry">blueberry</option>
                        <option value="strawberry">strawberry</option>
                        <option value="cashews">cashews</option>
                        <option value="peanuts">peanuts</option>
                    </select>
                </form>    
            </div>
            <div class="middle">
                <input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
                <input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
            </div>
            <div class="side">
                <form name="right">
                    <select id="right" class="right" multiple name="out">
                        <option value="greenbeans">greenbeans</option>
                        <option value="walnuts">walnuts</option>
                    </select>
                </form>    
            </div>
        </div>
    </body>
</html>

Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?

I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get:

Code:

Foo bar frog

becomes: Code:

Foo <b>bar</b> frog

I found some code that works for firefox, but I need it to work in explorer as well.

Do you have any ideas or examples how to do this?

Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. )

Usage: Code:

<a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>

insert function: Code:

<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
	// Can a text range be created?
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script>

Hi Guys,

I'm a new member, so hello all!
I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help!

Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other.
these two types are available in a selection box.

What I want to happen is when the "RSVP" option is selected, the following options are displayed:
"Yes/No" radio buttons
"additional info" textarea

And when the "Other" option is selected, the following option is displayed:
"Message" text area

How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide!

At the moment, my form looks like this: -

Code:

<form method="POST" action="contact.php">
<table class="contact">
<tr>
<td>Name:</td>
<td><input type="text" name="name" size="20"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select size="1" name="type">
<option value="rsvp" >RSVP</option>
<option value="other">Other</option></td>
</tr>
<tr>
<td colspan=2>&nbsp;</td>
</tr>

<div id="rsvp" style="display:none;">
<tr>
<td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td>
</tr>
<tr>
<td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td>
</tr>
<tr>
<td colspan=2>Additional Comments (Please include any special dietary requirements): </td>
</tr>
<tr>
<td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td>
</tr>
</div>

<div id="other" style="display:none;">
<tr>
<td colspan=2>Message:</td>
</tr>
<tr>
<td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td>
</tr>
</div>

<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Submit" name="submit"> &nbsp; <input type="reset" value="Reset" name="reset"></td>
</tr>
</table>
</form>

Please note, the style="display:none;" parts aren't even working

I appreciate any help you can give!

thanks!

*Edit: I thread title should probably be "Initialize indices..."*

I've done quite a bit of research but couldn't find what I need to know so here I am.

I have some javascript generated by php that reads a configuration file to add options to a select menu. This is somewhat irrelevant but... these options are removed from the menu when clicked and data related to the option is shown on the page... and the option gets re-added when the data is closed. I need the option to go back in the correct place/order in the select menu... which wouldn't be a problem if I could initialize the indices of the menu's options. They need to be initialized because when the page is created, saved settings are read and certain options are not shown in the list because they may already be shown according to the settings... meaning... since browsers automatically increment the indices of the options by 1 (starting at 0), if data is closed that was initially open and therefore not in the select menu at first... the key/index associated with that data will likely not match the correct menu order.

Code:

<script type="text/javascript">
	function addOptionToSelect(selectID,index,offset,val,txt) {
		var elSel = document.getElementById(selectID);
		elSel.options[index+offset].value = val;
		elSel.options[index+offset].text = txt;
	}
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
<?php
	foreach ($props as $k => $prop) {
		if (!in_array($prop, $_SESSION['crProps'])) {
?>
	addLoadEvent(addOptionToSelect('propertySelect',<?php echo $k; ?>,1,'?p=<?php echo $prop; ?>&k=<?php echo $k; ?>','<?php echo $prop; ?>'));
<?php
		}
	}
?>
</script>

For example, suppose I have the following potential data sets: a,b,c,d,e,f

In the config file that helps create the page, suppose it is something like: <Default>0:a|2:c|3:d</Default>
(FYI: I've designed it so that the data set names/options are separated by the pipe character ("|") and their corresponding index is the number to the left of the colon.)

Then the select menu that is initially generated would be something like:
(Every other data set name except for what is already open by default.)
<select id="bleh">
<option value="b">b
<option value="e">e
<option value="f">f
</select>

And by default, browsers would assign the indices like so:
(skipping getElementById and all that...)
select.options[0].value = b
select.options[1].value = e
select.options[2].value = f

Whereas, I need it to be initialized like this:
select.options[1].value = b
select.options[4].value = e
select.options[5].value = f

So that when the data sets initially open are closed (a, c, or d)... they get put in the correct position in the list.


I just thought of something... it's a little inefficient (OCD lol) but it should work and at worst would only cost a couple of milliseconds of processing time. A solution to this problem might be to load the menu with all options so that their indices are correct... and remove the defaults afterward. I'll try it.

Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one.

Here is my code..

PHP Code:
function removeCats() {
    
    // Set selected category list
    var sel_cats = document.getElementById('cat_sel');    
    
    for (i = sel_cats.length-1; i >= 0; i--) {

        // Check if the cat is selected

        if (sel_cats.childNodes[i].selected == true) {

            // Remove the category
            sel_cats.removeChild(sel_cats.childNodes[i]);
        
        }
        
    }
    
} 


Thanks again guys!