Tengo un formulario en el cual a través de un radiobutton elijo una lista desplegable u otra, cuyo valor quiero pasarlo a través del name a un modelo de mi aplicación para que lo añada a la base de datos, tal que:
FORMULARIO:
<label for="size" class="col-md-4 control-label">Tamaño</label>
<div class="col-md-6">
<input type="radio" id="numero" value="numero">Numero<br>
<select class="form-control hidden" name="size" id="lista_numero">
<option value="">--Escoja el tamaño--</option>
<option value="1">nº 1</option>
<option value="2">nº 2</option>
<option value="3">nº 3</option>
</select>
<input type="radio" id="simple" value="simple">Valor simple<br>
<select class="form-control hidden" name="size" id="lista_simple">
<option value="">--Escoja el tamaño--</option>
<option value="3">3 cm</option>
<option value="5">5 cm</option>
<option value="10">10 cm</option>
<option value="20">20 cm</option>
<option value="30">30 cm</option>
</select>
<input type="radio" id="compuesto" value="compuesto">Valor compuesto<br>
<select class="form-control hidden" name="size" id="lista_compuesto1">
<option value="">--Escoja el ancho--</option>
<option value="5">5 cm</option>
<option value="10">10 cm</option>
<option value="15">15 cm</option>
<option value="20">20 cm</option>
<option value="30">30 cm</option>
<option value="50">50 cm</option>
<option value="60">60 cm</option>
</select>
<select class="form-control hidden" name="size" id="lista_compuesto2">
<option value="">--Escoja el alto--</option>
<option value="0,25">0.25 cm</option>
<option value="0,5" select="selected">0.5 cm</option>
<option value="1">1 cm</option>
<option value="2">2 cm</option>
<option value="5">5 cm</option>
<option value="25">25 cm</option>
</select>
</div>
</div>
Siendo JQuery:
<script>
$('#numero').click(function(){
$('#lista_numero').removeClass("hidden");
$('#lista_simple').addClass("hidden");
$('#lista_compuesto1').addClass("hidden");
$('#lista_compuesto2').addClass("hidden");
});
$('#simple').click(function(){
$('#lista_numero').addClass("hidden");
$('#lista_simple').removeClass("hidden");
$('#lista_compuesto1').addClass("hidden");
$('#lista_compuesto2').addClass("hidden");
});
$('#compuesto').click(function(){
$('#lista_numero').addClass("hidden");
$('#lista_simple').addClass("hidden");
$('#lista_compuesto1').removeClass("hidden");
$('#lista_compuesto2').removeClass("hidden");
})
</script>
Para que me ponga en oculto el resto de listas desplegables si su radiobutton no está seleccionado. Como en los tres select de las listas desplegables tengo el mismo atributo name="size", cuando mando el formulario la variable 'size' = NULL, ya que existen tres variables con valor y solo seleccionado una(que es el valor real que quiero pasarle a la variable) Como hago a través de JQuery que solo tenga el atributo name='size' el select que tengo seleccionado??? Gracias