Intercambiar opciones re 2 select listent
Me gustaria intercambiar opciones entre select list pero con todo y su estilo
uso el siguiente codigo para cambiar me funciona pero no me pasa el estilo!
> JAVASCIPT
function deleteOption(object,index) {
object.options[index] = null;
}
function addOption(object,text,value) {
var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected, selected)
object.options[object.length] = optionName;
}
function copySelected(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
if (fromObject.options.selected)
addOption(toObject,fromObject.options.text,fromObject.options.value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
if (fromObject.options.selected)
deleteOption(fromObject,i);
}
}
function copyAll(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
addOption(toObject,fromObject.options.text,fromObject.options.value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
deleteOption(fromObject,i);
}
}
function populateHidden(fromObject,toObject) {
var output = '';
for (var i=0, l=fromObject.options.length;i<l;i++) {
output += escape(fromObject.name) + '=' + escape(fromObject.options.value) + '&';
}
alert(output);
toObject.value = output;
}
function selectall(){
var els = document.getElementById('sel2').options;
for(i = 0; i < els.length; i++){
els.selected = true;
}
var els = document.getElementById('sel4').options;
for(i = 0; i < els.length; i++){
els.selected = true;
}
}
> HTML
<select style="width:300px;" name="sel5[]" id="sel5" size="10" multiple="multiple">
<option value="" style="background: url(color1.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 1</option>
<option value="2" style="background: url(color2.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 2</option>
<option value="3" style="background: url(color3.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 3</option>
</select>
<input type="button" value="-->" onClick="if (document.images) copySelected(this.form.sel5,this.form.sel6)" /><br /><br />
<input type="button" value="<--" onClick="if (document.images) copySelected(this.form.sel6,this.form.sel5)" />
<select name="sel6[]" id="sel6" size="10" multiple="multiple">
<option value="4" style="background: url(color4.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 4</option>
<option value="5" style="background: url(color5.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 5</option>
</select>
Sabes como hacerlo?!
Gracias!
uso el siguiente codigo para cambiar me funciona pero no me pasa el estilo!
> JAVASCIPT
function deleteOption(object,index) {
object.options[index] = null;
}
function addOption(object,text,value) {
var defaultSelected = true;
var selected = true;
var optionName = new Option(text, value, defaultSelected, selected)
object.options[object.length] = optionName;
}
function copySelected(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
if (fromObject.options.selected)
addOption(toObject,fromObject.options.text,fromObject.options.value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
if (fromObject.options.selected)
deleteOption(fromObject,i);
}
}
function copyAll(fromObject,toObject) {
for (var i=0, l=fromObject.options.length;i<l;i++) {
addOption(toObject,fromObject.options.text,fromObject.options.value);
}
for (var i=fromObject.options.length-1;i>-1;i--) {
deleteOption(fromObject,i);
}
}
function populateHidden(fromObject,toObject) {
var output = '';
for (var i=0, l=fromObject.options.length;i<l;i++) {
output += escape(fromObject.name) + '=' + escape(fromObject.options.value) + '&';
}
alert(output);
toObject.value = output;
}
function selectall(){
var els = document.getElementById('sel2').options;
for(i = 0; i < els.length; i++){
els.selected = true;
}
var els = document.getElementById('sel4').options;
for(i = 0; i < els.length; i++){
els.selected = true;
}
}
> HTML
<select style="width:300px;" name="sel5[]" id="sel5" size="10" multiple="multiple">
<option value="" style="background: url(color1.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 1</option>
<option value="2" style="background: url(color2.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 2</option>
<option value="3" style="background: url(color3.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 3</option>
</select>
<input type="button" value="-->" onClick="if (document.images) copySelected(this.form.sel5,this.form.sel6)" /><br /><br />
<input type="button" value="<--" onClick="if (document.images) copySelected(this.form.sel6,this.form.sel5)" />
<select name="sel6[]" id="sel6" size="10" multiple="multiple">
<option value="4" style="background: url(color4.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 4</option>
<option value="5" style="background: url(color5.jpg) no-repeat scroll left center transparent; padding: 7px 31px 6px;">Color 5</option>
</select>
Sabes como hacerlo?!
Gracias!
1 respuesta
Respuesta de krlosnow
1