jquery - Ocultar/mostrar conjunto de campos no consistente
mi jsfiddle está aquí: http://jsfiddle.net/justmelat/QnKeZ/
Oculto conjuntos de campos al cargar la página, luego muestro un conjunto de campos en particular según el tipo de producto seleccionado en el menú desplegable. Pensé que esto funcionaba, pero después de seleccionar del menú desplegable del tipo de producto varias veces, las secciones que deben ocultarse o no ocultarse.
¿Cómo podría esto o qué me estoy perdiendo?
mi jsfiddle está aquí: http://jsfiddle.net/justmelat/QnKeZ/
HTML aquí >>
<form method="post" action="">
<div id="holdMsg"></div>
<fieldset id="mainSection" name="mainSection">
<legend style="color:blue; font-weight:bold">Project Overview Section</legend>
<table style="width: 100%">
<tr>
<td style="height: 33px; width: 178px;">Name</td>
<td style="height: 33px"><input id="1125" name="1125" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px;">Email</td>
<td style="height: 33px"><input id="1026" name="1026" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Title</td>
<td><input id="1089" name="1089" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Type</td>
<td><select id="1169" name="1169">
<option value="">Select</option>
<option value="Cars">Cars</option>
<option value="Boats">Boats</option>
<option value="Planes">Planes</option>
</select></td>
</tr>
</table>
</fieldset>
<fieldset id="section-11" name="section-11">
<legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-12" name="section-12">
<legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-13" name="section-13">
<legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset><br>
<fieldset id="section-1011" name="section-1011">
<legend style="color:green; font-weight:bold">Misc Info Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1302" name="1302">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
</form>
jquery aquí >>
$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#section-1011").hide();
var projtype = new Array(
{value : 'Cars', sect_id : 'fieldset#section-11'},
{value : 'Planes', sect_id : 'fieldset#section-12'},
{value : 'Boats', sect_id : 'fieldset#section-13'}
);
$("select#1169").on('change',function () {
var thisVal = $(this).val();
var sect_id ="";
$(projtype).each(function() {
$(this.sect_id).hide();
if(this.value == thisVal) {
$(this.sect_id).show();
return false;
}
});
});
preguntado el 03 de mayo de 12 a las 17:05
user1176783
3 Respuestas
Eliminar return false; a partir de su each función.
Este planteamiento de « return declaración deja de ejecutar su each iteración y deja de ocultar otros conjuntos de campos.
contestado el 03 de mayo de 12 a las 18:05
$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#section-1011").hide();
var projtype = new Array({
value: 'Cars',
sect_id: 'fieldset#section-11'
}, {
value: 'Planes',
sect_id: 'fieldset#section-12'
}, {
value: 'Boats',
sect_id: 'fieldset#section-13'
});
$("select#1169").on('change', function() {
var thisVal = $(this).val();
$('fieldset[id!="mainSection"]').hide();
var sect_id = "";
$(projtype).each(function() {
if (this.value == thisVal) {
$(this.sect_id).show();
}
});
});
Ver este DEMO
contestado el 03 de mayo de 12 a las 18:05
Eliminar el return false;. ¿Hay alguna razón específica para mantenerlo allí? tu actualizado violín.
contestado el 03 de mayo de 12 a las 18:05
Eso es todo. Lo copié de otro fragmento de código que estaba usando y no lo eliminé. ¡¡¡¡GRACIAS!!!! - user1176783
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery or haz tu propia pregunta.
wow, eso funciona, ¿sabes por qué el mío no funcionó? Solo estoy aprendiendo jquery y hago programación real con él al mismo tiempo [no es bueno, lo sé], estoy pensando "en el futuro", sería más seguro decir ocultar los FS que no han sido seleccionados en la matriz. Veo la posibilidad de que un cliente tenga 2, 3 5 FS que tal vez quiera mostrar "siempre", por lo que no quiero enumerar cada uno. - user1176783