PDA

View Full Version : Preference selection

jkjk
10-10-2002, 09:41 AM
I'm wondering how to implement a preference selection on web.
For example, I want the users to rank the following items.
Car ranking,
Toyota, Honda, Mercedes, Opel, Audi

My current implementation is put all the 5 items in 5 form <selection> box for Rank1 to Rank 5 and let the <action> to sort out the duplicate/empty entries.
I have no control on the frontend because users can select the 1st item for all ranks.

I don't know whether there is a javascript available so that when users select item 1 in Rank1, all item1 in Rank2 to Rank5 will be removed. So that there is no duplicate selected items.

Or, do anyone have a better idea of how to make a rank selection.
Thanks.

JK :rolleyes:
RadarBob
10-10-2002, 01:58 PM
How about two lists (<select>s)?

The first is the original list of cars. Then selecting each car, one at a time, then clicking a button, the value is moved over to the other list. This new list now has the cars in order.

Then you'll need several other buttons - "move up" "move down" "move to top" "move to bottom" for example, to re-arrange the list that was built as described above.

Yes, this involes more than 20 minutes of coding. Let's just say you're gonna get real good at handling arrays. Go to the JavaScript code posting area and look for "dynamic list" (or something like that). That will get you started.

good luck!
adios
10-10-2002, 07:42 PM
Just happen to have knocked something very like this off recently; you're welcome to it, if interested.


<html>
<head>
<title>untitled</title>
<style type="text/css">

input, select, td {
font: 200 10px verdana, helvetica, arial, sans-serif;
text-align: center;
background: darkorange;
}

td {
background: black;
color: ivory;
}

body {
text-align: center;
margin: 100px;
background: #775555;
}

</style>
<script type="text/javascript" language="javascript">

var destMAX = 8; //maximum number of items in dest list

function inDest(dest, text, value) {
var opt, o = 0;
while (opt = dest[o++]) if (opt.value == value &amp;&amp; opt.text == text) return true;
return o > destMAX;
}

function toDest(s, dest) {
var opt, o = 0;
while (opt = s[o++]) if (opt.selected &amp;&amp; !inDest(dest, opt.text, opt.value))
dest.options[dest.length] = new Option(opt.text,opt.value);
if (navigator.appName == 'Netscape' &amp;&amp;
(navigator.appVersion.indexOf('Win') != -1 ||
navigator.appVersion.indexOf('Mac') != -1))
history.go(0);
}

//courtesy M. Honnen /////////////
//http://www.faqts.com ///////////
function moveSelected (select, down) {
if (select.selectedIndex != -1) {
if (down) {
if (select.selectedIndex != select.options.length - 1)
var x = select.selectedIndex + 1;
else
return;
}
else {
if (select.selectedIndex != 0)
var x = select.selectedIndex - 1;
else
return;
}
var swapOption = new Object();
swapOption.text = select.options[select.selectedIndex].text;
swapOption.value = select.options[select.selectedIndex].value;
swapOption.selected = select.options[select.selectedIndex].selected;
swapOption.defaultSelected = select.options[select.selectedIndex].defaultSelected;
for (var property in swapOption)
select.options[select.selectedIndex][property] = select.options[x][property];
for (var property in swapOption)
select.options[x][property] = swapOption[property];
}
}

function delSelected(dest) {
var opt, o = 0;
while (opt = dest[o++]) if (opt.selected) dest[o-1] = null;
}

function setHidden(f) {
var destVals = new Array(), opt = 0, separator = '|', d = f.dest;
while (d[opt]) destVals[opt] = d[opt++].value;
f.destItems.value = separator + destVals.join(separator) + separator;
alert('destItems.value = ' + f.destItems.value); //demo only
return true;
}

</script>
</head>
<body>
<form name="marquepick" action="" method="get" onsubmit="return false;">
<table cellspacing="0" cellpadding="3" border="3"><tr>
<td>&amp;#149; pick marque</td>
<td><strong>&amp;#187;</strong></td>
<td>&amp;#149; rank marque</td>
<td>&amp;#149; edit &amp;#149;</td>
<td>&amp;#149; submit &amp;#149;</td>
</tr><tr><td>
<select name="src" id="src" size="8" style="width:76px;"
onchange="toDest(this,dest)">
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Mercedes">Mercedes</option>
<option value="Opel">Opel</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Drebnik">Drebnik</option>
</select></td><td>
&amp;#187;<br />&amp;#187;<br />&amp;#187;<br />&amp;#187;<br />&amp;#187;<br />&amp;#187;
</td><td>
<select name="dest" size="8" style="width:76px;">
</select>
</td><td align="center">
<input type="button" value="move up" onclick="moveSelected(dest,false)" /><br /><br />
<input type="button" value="move dn" onclick="moveSelected(dest,true)" /><br /><br />
<input type="button" value="&amp;nbsp;delete&amp;nbsp;"
onclick="delSelected(dest)" />
</td><td align="middle">
<input type="hidden" name="destItems" />
<input type="submit" value="&amp;nbsp;send&amp;nbsp;" onclick="return setHidden(this.form)" />
</td></tr></table>
</form>
</body>
</html>
RadarBob
10-10-2002, 07:48 PM
Very nice, adios. I like it alot.
jkjk
10-17-2002, 10:32 AM
Thanks a lot.
I like the code although I'm not very familiar with javascript.