doblecombo.html
Código PHP:
<HTML>
<HEAD>
<script src="intercambio.js"></script>
<TITLE>Doble ComboBox dinamico</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<BODY>
<form NAME="theform" ID="theform" ACTION="index9.php" onSubmit="return selIt();">
<br>
<SELECT onchange=redirect(this.options.selectedIndex) size=1 name=example>
<OPTION selected>a</OPTION>
<OPTION>b</OPTION>
<OPTION>c</OPTION>
</SELECT>
<SELECT size=1 name=SelectList>
<OPTION value"a1">a1</OPTION>
<OPTION value="a2">a2</OPTION>
<OPTION value="a3">a3</OPTION>
</SELECT>
<SCRIPT>
<!--
var groups=document.theform.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("a1","a1")
group[0][1]=new Option("a2","a2")
group[0][2]=new Option("a3","a3")
group[1][0]=new Option("b1","b1")
group[1][1]=new Option("b2","b1")
group[2][0]=new Option("c1","c1")
group[2][1]=new Option("c2","c2")
group[2][2]=new Option("c3","c3")
var temp=document.theform.SelectList
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</SCRIPT>
<br>
<table width="25%">
<tr>
<td width="24%" align="center"><input TYPE="BUTTON" VALUE="Añadir" onClick="addIt();" class="botoncito"></input>
</td>
<td width="76%"><select NAME="PickList[]" ID="PickList" SIZE="4" multiple="multiple" style="width: 100px;"></select></td>
</tr>
</table>
</FORM>
</BODY></HTML>
Código PHP:
var singleSelect = true; // Allows an item to be selected once only
var sortSelect = true; // Only effective if above flag set to true
var sortPick = true; // Will order the picklist in sort sequence
// Initialise - invoked on load
function initIt() {
var selectList = document.getElementById("SelectList");
var selectOptions = selectList.options;
var selectIndex = selectList.selectedIndex;
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
pickOptions[0] = null; // Remove initial entry from picklist (was only used to set default width)
if (!(selectIndex > -1)) {
selectOptions[0].selected = true; // Set first selected on load
selectOptions[0].defaultSelected = true; // In case of reset/reload
}
selectList.focus(); // Set focus on the selectlist
}
// Adds a selected item into the picklist
function addIt() {
var selectList = document.getElementById("SelectList");
var selectIndex = selectList.selectedIndex;
var selectOptions = selectList.options;
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
var pickOLength = pickOptions.length;
var selOpts = new Array();
for (i = 0; i < selectList.length; i++) {
selOpts.push(i);
selOpts.push(selectOptions[i]);
}
// An item must be selected
while (selectIndex > -1) {
pickOptions[pickOLength] = new Option(selectList[selectIndex].text);
pickOptions[pickOLength].value = selectList[selectIndex].value;
// If single selection, remove the item from the select list
if (singleSelect) {
selectOptions[selectIndex] = null;
}
if (sortPick) {
var tempText;
var tempValue;
// Sort the pick list
/*while (pickOLength > 0 && pickOptions[pickOLength].value < pickOptions[pickOLength-1].value) {
tempText = pickOptions[pickOLength-1].text;
tempValue = pickOptions[pickOLength-1].value;
pickOptions[pickOLength-1].text = pickOptions[pickOLength].text;
pickOptions[pickOLength-1].value = pickOptions[pickOLength].value;
pickOptions[pickOLength].text = tempText;
pickOptions[pickOLength].value = tempValue;
pickOLength = pickOLength - 1;
}*/
}
selectIndex = selectList.selectedIndex;
pickOLength = pickOptions.length;
}
//selectOptions[0].selected = true;
for (i = 0; i < selOpts.length; i+=2) {
selectOptions[selOpts[i]] = selOpts[i + 1];
}
}
// Deletes an item from the picklist
function delIt() {
var selectList = document.getElementById("SelectList");
var selectOptions = selectList.options;
var selectOLength = selectOptions.length;
var pickList = document.getElementById("PickList");
var pickIndex = pickList.selectedIndex;
var pickOptions = pickList.options;
while (pickIndex > -1) {
// If single selection, replace the item in the select list
/*if (singleSelect) {
selectOptions[selectOLength] = new Option(pickList[pickIndex].text);
selectOptions[selectOLength].value = pickList[pickIndex].value;
}*/
pickOptions[pickIndex] = null;
if (singleSelect && sortSelect) {
var tempText;
var tempValue;
// Re-sort the select list
/*while (selectOLength > 0 && selectOptions[selectOLength].value < selectOptions[selectOLength-1].value) {
tempText = selectOptions[selectOLength-1].text;
tempValue = selectOptions[selectOLength-1].value;
selectOptions[selectOLength-1].text = selectOptions[selectOLength].text;
selectOptions[selectOLength-1].value = selectOptions[selectOLength].value;
selectOptions[selectOLength].text = tempText;
selectOptions[selectOLength].value = tempValue;
selectOLength = selectOLength - 1;
}*/
}
pickIndex = pickList.selectedIndex;
selectOLength = selectOptions.length;
}
}
// Selection - invoked on submit
function selIt(btn) {
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
var pickOLength = pickOptions.length;
if (pickOLength < 1) {
alert("No ha seleccionado ningún elemento.");
return false;
}
for (var i = 0; i < pickOLength; i++) {
pickOptions[i].selected = true;
}
return true;
}
Un saludo.
