Saludos:
Algo parecido estoy pasando. El problema es que cuando se procesa la información en php de los selects multiples con optgroup creados dinamicamente solo obtengo el valor de la primer select, el cual estaba originalmente y no fue creado dinamicamente.
se utilizan para este caso un formulario, un javascript para crear los selects (clonarlos con una legera modificación) y el ultimo jquery que solo interviene para la creación de los selects necesarios.
FORMULARIO (con el proceso en php)
<?php
if(isset($_POST['s1'])) {
function array_count_all($arr, $r = 0) {
foreach ($arr as $k => $v) {
if (is_array($v)) {
$r = array_count_all($v, $r);
$r++;
}
}
return $r;
}
$dormitorios = ($_POST["dormitorios"]);
$cantdorm = ($_POST["cantdorm"]);
$numdor = count($cantdorm);
$cuenta1 = '1';
while($cuenta1<=($numdor+1))
{
echo '<br /><br /><strong>Dormitorio #' . $cuenta1 . '</strong> ';
for ($i=0;$i<count($dormitorios);$i++)
{
if ($i == 0){$opcion = "Tipo de Dormitorio";}
if ($i == 1){$opcion = "Tipo de Cama";}
if ($i == 2){$opcion = "Cama supletoria";}
if ($i == 3){$opcion = "Baño";}
if ($i == 4){$opcion = "Closet";}
if ($i == 5){$opcion = "Aire Acondicionado";}
echo "<br>" . $opcion . ": " . $dormitorios[$i];
}
$cuenta1=($cuenta1+1);
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="css/iwannaplace.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js2/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js2/jquery.addfield.js"></script>
</head>
<body>
<form method="get" action="">
<div id="div_0">
<strong>Características del Dormitorio:</strong>
<select name="dormitorios[]" size="5" multiple="multiple" class="text" id="dormitorios" >
<optgroup label="Tipo">
<option value="Individual"><strong>Individual</strong></option>
<option value="Doble"><strong>Doble</strong></option>
<option value="Triple"><strong>Triple</strong></option>
<option value="Cuadruple"><strong>Cuadruple</strong></option>
<option value="Jr Suite"><strong>Jr Suite</strong></option>
<option value="Suite"><strong>Suite</strong></option>
</optgroup>
<optgroup label="Camas">
<option value="Sencilla"><strong>Sencilla</strong></option>
<option value="Doble"><strong>Doble</strong></option>
<option value="Queen size"><strong>Queen Size</strong></option>
<option value="King size"><strong>King Size</strong></option>
<option value="Sofá cama"><strong>Sofá cama</strong></option>
</optgroup>
<optgroup label="Cama Supletoria">
<option value="Con cama supletoria"><strong>Con cama supletoria</strong></option>
<option value="Sin cama supletoria"><strong>Sin cama supletoria</strong></option>
</optgroup>
<optgroup label="Baño">
<option value="Completo"><strong>Baño completo</strong></option>
<option value="Medio baño"><strong>Medio baño</strong></option>
<option value="Sin baño"><strong>Sin baño</strong></option>
</optgroup>
<optgroup label="Closet">
<option value="Walk-in Closet"><strong>Walk-in Closet</strong></option>
<option value="Closet normal"><strong>Closet normal</strong></option>
<option value="Sin closet"><strong>Sin closet</strong></option>
</optgroup>
<optgroup label="Aire acondicionado">
<option value="Central"><strong>Central</strong></option>
<option value="Empotrado"><strong>Empotrado</strong></option>
<option value="Split"><strong>Split</strong></option>
<option value="Sin aire acondicionado"><strong>Sin aire acondicionado</strong></option>
</optgroup>
</select>
<strong> Cantidad: </strong>
<input id="cantdorm" name="cantdorm[]" type="text" class="input" style="width:40px;" />
<input name="button" type="button" class="bt_plus" id="0" value="+" />
</div>
<p>
<input type="submit" name="s1" value="Enviar">
</p>
</form>
</body>
</body>
el javascript que crea los selects dinamicos:
$(document).ready(function() {
//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
$(".bt_plus").each(function (e){
$(this).bind("click",addField);
});
});
function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.
var clickID = parseInt($(this).parent('div').attr('id').replace( 'div_',''));
// Genero el nuevo numero id
var newID = (clickID+1);
// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);
//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);
$newClone.children("#dormitorios option::selected").remove();
$newClone.children("#dormitorios").attr("name","do rmitorios"+ newID +"");
//Borro el valor del segundo campo input(este caso es el campo de cantidad) y lo identifico secuencialmente
$newClone.children("input").eq(0).val('');
$newClone.children("#cantdorm").attr("name","cantd orm"+ newID +"");
//Asigno nuevo id al boton
$newClone.children("input").eq(1).attr("id",newID)
//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));
//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);
//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);
}
function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();
}
#######################
Si alguien me puede dar una manito, desde ya, le quedo muy agradecido.