jquery clone() + selectType() [funcionando]
Clonar uma div de código html do cakephp, onde cada div possui um combobox, selecionando-o, deveria abrir apenas a div correspondente, mas está abrindo as demais.
by Francis Rodrigues
October 06, 2011
HTML
<div id="SiteHydroDiv">
<div class="group">
<input name="data[SiteHydro][0][id]" value="7" id="SiteHydro0Id" type="hidden">
<div class="header">Estação</div>
<div class="fields">
<div class="required">
<label for="SiteHydro0Name">Nome da estação</label>
<input name="data[SiteHydro][0][name]" maxlength="255" value="Estação 1" id="SiteHydro0Name" type="text">
</div>
<div class="required">
<label for="SiteHydro0HydroTypeName">Tipo de estação</label>
<select name="data[SiteHydro][0][hydro_type_name]" id="SiteHydro0HydroTypeName" class="selectHydro" alt="0">
<option value="0">Selecione...</option>
<option value="seiom" selected="selected">Seiom Informática</option>
</select>
</div>
</div>
<div id="hydro_type_seiom" class="seiom_class_0">
<div class="fields">
<div class="required">Seiom Informática</div>
<input name="data[SiteHydro][0][SiteHydroSeiom][id]" value="7" id="SiteHydro0SiteHydroSeiomId" type="hidden">
<div class="required">
<label for="SiteHydro0SiteHydroSeiomEmail">Email</label>
<input name="data[SiteHydro][0][SiteHydroSeiom][email]" value="[email protected] " id="SiteHydro0SiteHydroSeiomEmail" type="text">
</div>
</div>
</div>
</div>
<div class="group">
<input name="data[SiteHydro][1][id]" value="8" id="SiteHydro1Id" type="hidden">
<div class="header">Estação</div>
<div class="fields">
<div class="required">
<label for="SiteHydro1Name">Nome da estação</label>
<input name="data[SiteHydro][1][name]" maxlength="255" value="Estação 2" id="SiteHydro1Name" type="text">
</div>
<div class="required">
...
CSS
.header {
font-weight:bold; font-family:verdana; font-size:14px;
}
.fields {
font-weight:normal; font-family:arial; font-size:12px;
}
li span {
cursor:pointer;
font-weight:normal; font-family:arial; font-size:12px;
}
JavaScript
$(document).ready(function () {
function selectType(o, p) {
val = o.val();
if (val) {
$("div[id^=\'" + p + "\']").each(function() {
if ($(this).val() != val) {
$(this).hide();
}
});
$("select").each(function() {
var valor = $(this).val();
var classVal = valor + "_class_" + $(this).attr('alt');
if (valor != 0) {
$('.' + classVal).show();
} else {
$('.' + classVal).hide();
}
});
}
}
// Funcao jquery clone
$("#SiteHydroDiv").each(function(){
var idx = $('#SiteHydroDiv > .group').size();
var action = '<div class="actions"><ul style="float: left;"><li><span class="delete" id="undoHydro">Desfazer</span></li></ul></div>';
var group = $("#SiteHydroDiv .group:first").clone();
$('#addHydro').live('click', function(){
var group = $("#SiteHydroDiv .group:first").clone();
$(group)
.find("input[type=hidden]").each(function(){
$(this)
.attr("id", $(this).attr("id").replace("0", idx))
.attr("name", $(this).attr("name").replace("[0]", "[" +idx+ "]"));
$(this).val( $(this).val().replace(/^[0-9]+$/,"") )
})
.end()
.find("label").each(function(){
$(this).attr("for", $(this).attr("for").replace("0", +idx));
})
.end()
.find("input").each(function(){
$(this)
.attr("id", $(this).attr("id").replace("0", idx))
.attr("name", $(this).attr("name").replace("[0]", "[" +idx+ "]"))
.attr("value", "")
})
.end()
.find("select").each(function(){
$(this)
...