Does anyone know how to have a number of <select> inputs that all must have unique values?
eg.
Rank these in order of preference:
Cheese: 3
Milk: 1
Butter: 2
Where the numbers represent a <select> <option> input in a form.
I have found something based on using javascript and Chained Selects but this isn't quite what I need.
It seems simple enough and common enough that HTML might implement it but having searched the HTML Specifications I can't spot anything.
I also found a script that when you press submit it performs a check and you must change your options but again this isn't quite what I need.
I have seen it done somewhere but for the life of me I can't remember where or I'd be there ha!
Thanks for any help.
David.
Last edited by powers1983 on Fri Apr 20, 2007 11:01 am; edited 1 time in total
I don't undersand very well the question. Do you wanna to select one tag with a number?
If so, put the number at the beginning of the tags, you can choose it pressing the number.
I understand what you mean, I think...So. you want the script to order checkboxes in order of preference?
You can do this using javascript. If you know any javascript, check the onchange event.
| Stubru Freak wrote: |
| You can do this using javascript. If you know any javascript, check the onchange event. |
Cheers. I've not used javascript that much but I'll give it a shot not I know what to search the manual for. It can't be that difficult (ha).
David.OK I've managed it phew.
The code I used is basically this:
| Code: |
<script type="text/javascript">
var rank= new Array();
var stuff;
rank["bread"]=0;
rank["toast"]=0;
rank["water"]=0;
function check_index(x,y)
{ // x is bread, y is 3
var orange;
var clash = "nope";
if (y>0) {
for (stuff in rank) {
var col_stuff;
if (rank[stuff]==y) // selected position is already taken
{
clash="yup";
col_stuff=stuff;
var new_value="0";
orange = col_stuff + '_' + new_value;
document.getElementById(orange).selected=true;
rank[col_stuff]=new_value;
} // end if already taken
} // end for
} // end if
rank[x]=y;
if (clash=="yup") {
alert('Selected rank was already taken by ' + col_stuff + ' and so that position has been changed to ' + new_value);
}
return false;
} // end function
</script>
|
with the form looking like:
| Code: |
<form method="post" action="arg.php" name="rank_taste">
<select name="bread" onchange="check_index(this.name, window.document.rank_taste.bread.options[selectedIndex].text)">
<option value="0" id="bread_0">0</option>
<option value="1" id="bread_1">1</option>
<option value="2" id="bread_2">2</option>
<option value="3" id="bread_3">3</option>
</select>
<select name="toast" onchange="check_index(this.name, window.document.rank_taste.toast.options[selectedIndex].text)">
<option value="0" id="toast_0">0</option>
<option value="1" id="toast_1">1</option>
<option value="2" id="toast_2">2</option>
<option value="3" id="toast_3">3</option>
</select>
<select name="water" onchange="check_index(this.name, window.document.rank_taste.water.options[selectedIndex].text)">
<option value="0" id="water_0">0</option>
<option value="1" id="water_1">1</option>
<option value="2" id="water_2">2</option>
<option value="3" id="water_3">3</option>
</select>
|
I did change it from what I was doing cos I had php making a lot of options and it was for something a bit differnet but I have tested this and it works.
It pops up an alert just to inform you it has changed something but this was just for my information in developing.
The code gets longer as you add more selects which is why I used php to generate the form and code, so I think it must be a clumsy way of doing it.
If anyone can suggest anything for the code then that would be very helpful.
Cheers everyone for the help.
David.
PS some of my variable names will not be helpful so sorry but they all mean something to me 
