We have an app on our site with a search form that has two <select> items, with the contents of the second one being dependent on what's chosen in the first.

The original app had a problem with the way the database was designed so that all searches were done as wildcard text searches. I've since normalized that database, and would like to change this form to pass numerical values instead of text ones.

For the first <select> that's easy, because it's generated from a db query. The second one however is done with Javascript, and I'm pretty horrible with JS. The current JS for the second <select> goes like this:

function populateSubdisciplines() {
			var o = document.getElementById("discipline");
			d = document.getElementById('subdiscipline');
			var mitems=new Array();
			mitems['114']=['[all]', 'Category One', 'Category Two', 'Category Three', 'Category Four'];
			mitems['115']=['[all]', 'Category One', 'Category Three', 'Category Four', 'Category Seven'];
			// Clear any entries in the subdisciples list box

			if (o.selectedIndex === -1) { return; }
			var cur = mitems[o.options[o.selectedIndex].value];
			for(var i=0;i<cur.length;i++) {
				d.options[i].text = cur[i];
				d.options[i].value = cur[i];
This renders the following:

HTML Code:
<select name="second">
<option value="Category One">Category One</option>
<option value="Category Two">Category Two</option>
<option value="Category Three">Category Three</option>
<option value="Category Four">Category Four</option>
What I'm trying to get is this:

HTML Code:
<select name="second">
<option value="23">Category One</option>
<option value="71">Category Two</option>
<option value="98">Category Three</option>
<option value="125">Category Four</option>
So I need to figure out how to modify the JS above to do that. Ideally, I'd make my code build the JS from the database so that editing the JS wouldn't be needed when new options are added, but maybe I can figure that out once I figure out how to pass the IDs with the names.