Buenas noches!
Buscando en Internet como poder resolver mi problema, encontré este código:
Código:
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Interchange/Swap List Items</title>
<script type="text/javaScript">
function moveToRightOrLeft(side){
var listLeft=document.getElementById('selectLeft');
var listRight=document.getElementById('selectRight');
if(side==1){
if(listLeft.options.length==0){
alert('You have already moved all countries to Right');
return false;
}else{
var selectedCountry=listLeft.options.selectedIndex;
move(listRight,listLeft.options[selectedCountry].value,listLeft.options[selectedCountry].text);
listLeft.remove(selectedCountry);
if(listLeft.options.length>0){
listLeft.options[0].selected=true;
}
}
}
else if(side==2){
if(listRight.options.length==0){
alert('You have already moved all countries to Left');
return false;
}
else{
var selectedCountry=listRight.options.selectedIndex;
move(listLeft,listRight.options[selectedCountry].value,listRight.options[selectedCountry].text);
listRight.remove(selectedCountry);
if(listRight.options.length>0){
listRight.options[0].selected=true;
}
}
}
}
function move(listBoxTo,optionValue,optionDisplayText){
var newOption = document.createElement("option");
newOption.value = optionValue;
newOption.text = optionDisplayText;
listBoxTo.add(newOption, null);
return true;
}
</script>
</head>
<body>
<div>
<ul>
<li><table border="0">
<tr>
<td colspan="4">Example 1:</td>
</tr>
<tr>
<td colspan="2">Available Countries </td>
<td colspan="2">Your Selection </td>
</tr>
<tr>
<td rowspan="3" align="right"><label>
<select name="selectLeft" size="10" id="selectLeft">
<option value="AS" selected="selected">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua And Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
</select>
</label></td>
<td align="left"> </td>
<td align="left"> </td>
<td rowspan="3" align="left"><select name="selectRight" size="10" id="selectRight">
<option value="AF" selected="selected">Afghanistan</option>
<option value="AX">Ã…Land Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
</select></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"><label>
<input name="btnRight" type="button" id="btnRight" value=">>" onClick="javaScript:moveToRightOrLeft(1);">
</label></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"><label>
<input name="btnLeft" type="button" id="btnLeft" value="<<" onClick="javaScript:moveToRightOrLeft(2);">
</label></td>
</tr>
<tr>
<td> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
</table>
</li>
<li>
<div>
<p>Copy and paste above code and modify it to add string values <br /> <br />
<strong>How to check option already exists or not?</strong><br /><br />
function isOptionAlreadyExist(listBox,value){<br />
var exists=false;<br />
for(var x=0;x<listBox.options.length;x++){<br />
if(listBox.options[x].value==value || listBox.options[x].text==value){ <br />
exists=true;<br />
break;<br />
}<br />
}<br />
return exists;<br />
}</p>
</div>
</li>
<li class="code_right"></li>
</ul>
</div>
</body>
</HTML>
Para que os hagais a la idea, es justamente el ejemplo numero 5 de esta pagina web:
[URL="http://www.latestcode.net/2011/07/add-or-remove-list-box-items.html"]http://www.latestcode.net/2011/07/add-or-remove-list-box-items.html[/URL]
El problema esta en que no se como almacenar dicha información en una base de datos. Supongamos que se pueden añadir los países o eliminarlos de un continente. Os agradezco vuestra ayuda!
Muchas gracias! Un saludo!