PDA

View Full Version : moving select option [NEW]



Ultragames
Sep 4th, 2005, 05:14 AM
Questions: Here are my specific Javascript questions. The entire problem is below

1) What do i use to call the title of a select option. Not the value?


General issue:
I'm not sure what this is called, but if you know, please tell.

I need to have 2 select boxes. The first one will be blank, and the second on will have maybe 5 items in it. I need the user to be able to click an item in Box2, and click an arrow and move it over to Box1.

So the boxes would be sort of like this:

- Month
- Year
- ID Number
- Counter
- Hyphen
- Slash

Then the user could click the options, and move them in the order they want, like so.

Month ID Number
Year Hyphen
Hyphen Slash
Counter

So that the final items in Box1 would, in this example, read: Month Year Hyphen Counter.

Moreover, if i havn't lost you thus far, i need Month, Year, ID-Number, and Counter to only be able to exist in one box, but Hyphen and Slash to be able to exist in both boxes, (effectivly creating multiples of them.)

What this is for, is for the user to setup how they want an ID number created. I want them to be able to move the items arround so that they can create a sequence such as:

MonthSlashYearHyphenCounter
would become:
9/3-0

If anyone understands what im trying to do and can explain it better, please do. If anyone can help me create this monster, help is very welcomed and needed.

THank you.

rm-f
Sep 4th, 2005, 09:01 AM
Something for start:


<html>
<head>
<script language="javascript" type="text/javascript">

function addOption(element, index, option) {var cN, o;
if('string' == typeof element) {
element = document.getElementById(element);
}
if('string' == typeof option) {
o = document.createElement('option');
o.text = option;
} else {o = option;}

if((cN = element.childNodes)) {
if(2 == element.add.length) {
element.add(
o,
((0 > index) || (cN.length == index)) ? null : cN[index]
);
} else {
element.add(o, index);
}
}
return o;
}

</script>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td>
<select id="fromSelect"></select>
</td>
<td width="40" align="center">
<button onclick="processSelected(); return false;">&nbsp;&gt;&nbsp;</button>
</td>
<td>
<select id="toSelect"></select>
</td>
</tr>
</table>


<script language="javascript">

initSelectElements();

function repeat(ch, n) {
var s = '';
for(var i=0; i<n;i++) s+= ch;
return s;
}

function initSelectElements() {
var optionArray = new Array('Month', 'Year', 'ID Number', 'Counter', 'Hyphen', 'Slash');

var maxLen = 0;
for(var i=0; i < optionArray.length ; i++) {
addOption('fromSelect', -1, optionArray[i]);
if((optionArray[i]).length > maxLen) maxLen = (optionArray[i]).length;
}

document.getElementById('fromSelect').size = optionArray.length;
document.getElementById('toSelect').size = optionArray.length;

filler = repeat('- ', maxLen);
addOption('toSelect', -1, filler);
}

function isErasable(opt) {
if( opt == 'Hyphen') return false;
if( opt == 'Slash') return false;
return true;
}

var prevInsElement = '';
var filler;

function processSelected() {
var idx = document.getElementById('fromSelect').selectedIndex;
var txt = document.getElementById('fromSelect')[idx].childNodes[0].nodeValue;

if( !isErasable(txt) && (prevInsElement=='' || !isErasable(prevInsElement))) {
alert('Can\'t insert a separator at this possition');
return false;
}

if(isErasable(txt)) {
document.getElementById('fromSelect').options[idx] = null;
}

if(document.getElementById('toSelect')[0].childNodes[0].nodeValue == filler) {
document.getElementById('toSelect').options[0] = null;
}
addOption('toSelect', -1, txt);
prevInsElement = txt;
}

</script>

</body>
</html>

dumpfi
Sep 4th, 2005, 09:47 AM
Another solution:

<html>
<head>
<script type="text/javascript">
var options = [
{ 'text':'Month', 'value':'Month', 'moveTo':['format'], 'moveFrom':['formatOptions'], 'times':1 },
{ 'text':'Year', 'value':'Year', 'moveTo':['format'], 'moveFrom':['formatOptions'], 'times':1 },
{ 'text':'Counter', 'value':'Counter', 'moveTo':['format'], 'moveFrom':['formatOptions'], 'times':1 },
{ 'text':'ID Number', 'value':'ID Number', 'moveTo':['format'], 'moveFrom':['formatOptions'], 'times':1 },
{ 'text':'Hyphen', 'value':'Hyphen', 'moveTo':['format'], 'moveFrom':['formatOptions'], 'times':-1 },
{ 'text':'Slash', 'value':'Slash', 'moveTo':['format'], 'moveFrom':['formatOptions'], 'times':-1 }
];
function populateSelect(options, select) {
var i, opt;
for(i = 0; i < options.length; i++) {
opt = new Option(options[i]['text'], options[i]['value']);
opt['moving'] = options[i];
select.add(opt, null);
}
resizeSelect(select);
}
function moveOption(option, to) {
var isFrom = option['moving']['moveFrom'] == to.name;
if(!isFrom && !option['moving']['moveTo'].inArray(to.name)) {
alert('Cannot move this option to the destination.');
return null;
}
if(!isFrom || option['moving']['times'] == 0) {
var clone = option.cloneNode(true);
clone['moving'] = option['moving'];
to.add(clone, null);
}
if(isFrom || option['moving']['times'] != -1) {
if(!isFrom) option['moving']['times'] += (isFrom) ? 1 : -1;
if(isFrom || option['moving']['times'] == 0) {
option.parentNode.removeChild(option);
return true;
}
}
return false;
}
function resizeSelect(select) {
select.size = (select.length > 10) ? 10 : select.length;
}
Array.prototype.inArray = function(val) {
for(var x in this) {
if(this[x] == val) return true;
}
return false;
}
function move(from, to) {
for(var i = 0; i < from.length; i++) {
if(from['options'][i].selected) {
if(moveOption(from['options'][i], to)) i--;
}
}
resizeSelect(from);
resizeSelect(to);
}

var f, ft,fto;
window.onload = function() {
f = document.forms['idFormat'];
ft = f['format'];
fto = f['formatOptions'];
populateSelect(options, fto);
}
</script>
<style type="text/css">
input
{
vertical-align:middle;
}
label
{
vertical-align:top;
}
select
{
vertical-align:bottom;
}
</style>
</head>
<body>
<form name="idFormat">
<fieldset>
<legend>Choose your ID format</legend>
<label for="formatOptions">Options</label>
<br>
<select name="formatOptions" id="formatOptions" multiple="multiple">
</select>
<br>
<input type="button" value="&uarr;" onClick="move(ft, fto)">
<input type="button" value="&darr;" onClick="move(fto , ft)">
<br>
<label for="format">Format</label>
<br>
<select name="format" id="format" size="0" multiple="multiple">
</select>
</fieldset>
</form>
</body>
</html>dumpfi