Another/separate value in Select Option - php

Question

I have a triple select option menu, that works fine now, but when I post/echo it in PHP both the option name and value are the same, so if I want a category that the name is Books, and that could be id=2 example.
I don't know how to put another value in the option, separate the name and value, can someone show me how???
Everything works fine, except I want to have another value than the same name I use to show option name. I hope you understand. :)
My code:
<script type="text/javascript">
var categories = [];
categories["startList"] = ["Wearing Apparel","Books"];
categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
var nLists = 3; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 0;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<form name="tripleplay" action="" method="post">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])" size="5">
</select>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])" size="5">
</select>
<select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)" size="5">
</select>
<br><br>
<input type="submit" value="Submit" name="next" />
</form>
<?php
if($_POST['next'])
{
echo $_POST['List1'].'<br>'.$_POST['List2'].'<br>'.$_POST['List3'].'<br>';
}
?>

Answer 1

I am not sure that I understand your intention, but when a form is submitted, the value(s) of select boxes are delivered to the server.
The label property is being displayed in the UI (no need to append a text node).
If you set the value and label properties appropriately, you will be able to submit the form with any value that you want.
For example, the option construction code could be:
var nOption = document.createElement('option');
nOption.setAttribute('value',each);
nOption.setAttribute('label',nCat[each]);
currList.appendChild(nOption);
And you could get the label by using this.selectedOptions[0].label.
Notes:
The coding style that you are using is not very good.
You use inline event handling and do not separate business logic from UI, to name the main issues.
I suggest that you try some kind of JavaScript framework, such as jQuery, which will prevent you from reinventing the wheel and ease you development considerably, leaving you time to do actual work (you may consider a server-side PHP framework as well).
Here is a jsFiddle demo that shows what I believe to be your desired effect.
Edit:
Since you asked about a better approach, I will describe one possibility that slightly abstracts the logic and separates it from the UI.
This is not extremely useful in this type of situations, but it can help in more complex cases.
represent the data hierarchically.
[{
"id": 131,
"label": "Wearing Apparel",
"children": [{
"id": 131,
"label": "Men",
"children": [{
"id": 65,
"label": "Shirts"
}, ...
]
}, {
"id": 143,
"label": "Women",
"children": [{
"id": 133,
"label": "Blouses"
},
...
]
}]
]
this way, you can encode a tree representation of PHP objects into JSON.
Create a jQuery objects that represents the list and generates the markup, since there is little use for it without JavaScript anyway.
Try to make your utility classes such that they could handle more general cases, so that in the future or as your current requirements change, you can still use it with minimal changes to your code.
Try to avoid inline handlers whenever possible (i.e, always).
I have created a jsFiddle example that does not go all the way, but still demonstrates some of those principles: it generates most of the markup on its own, handles the events itself, able to handle data with arbitrary and varying depth.

Answer 2

If I understand your problem is
<option value="Wearing Apparel">Wearing Apparel</option>
that the value and the text(Wearing Apparel) is the same
First of all use another array sructure ( but json would be better )
categories["Books"] = [
["Biography"],
["Fiction"],
["Nonfiction"]
];
An your loop
for (i=0; i<nCat.length; i++) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[i]); // <------- use the "text"
nOption.setAttribute('value',i); // <------- use the index of the step
nOption.appendChild(nData);
currList.appendChild(nOption);
}
In this case
<option value="0">Wearing Apparel</option>
And your POST array will look like
Array ( [List1] => 0
[next] => Submit
)
Where 0 is the ID of the "Wearing Apparel" element
... and 1 is ID of the "Books"