Skip to content

Instantly share code, notes, and snippets.

@chrdesigner chrdesigner/README.md
Last active Mar 19, 2016

Embed
What would you like to do?

Formulário de Departamentos com Suporte de Option Group

Contact Form 7 + Option Group

Criação de um formulário via Contact Form 7 com select personalizado com Option Group para seleção de departamentos.

Download do Contact Form 7

<dl class="col-md-12 col-sm-12 col-xs-12 clearfix">
<dd>
<label for="nome-completo">*Nome Completo</label>
[text* nome-completo id:nome-completo class:input-default]
</dd>
<dd>
<label for="e-mail">*Email</label>
[email* e-mail id:e-mail class:input-default]
</dd>
<dd>
<label for="cidade-estado">*Cidade/Estado</label>
[text* cidade-estado id:cidade-estado class:input-default]
</dd>
<dd>
<label for="telefone">*Telefone</label>
[text* telefone id:telefone class:input-default class:input-tel]
</dd>
<dd>
<label for="selecione-uma-empresa">*Selecione uma empresa</label>
[select* selecione-uma-empresa id:selecione-uma-empresa class:select-default "Selecione" "Empresas do Grupo" "Empresa X" "Empresa Y" ]
</dd>
<dd>
<label for="departamento">*Departamento</label>
[select* departamento id:departamento class:select-default "Selecione" "parent_Empresa do Grupo" "Administrativo|administrativo@teste.com.br" "Financeiro|financeiro@teste.com.br" "Marketing|marketing@teste.com.br" "Outros|outros@gteste.com.br" "endparent" "parent_Empresa X" "Administrativo|administrativo@teste.com.br" "Marketing|marketing@teste.com.br" "endparent" "parent__Empresa Y" "Financeiro|financeiro@teste.com.br" "Outros|outros@gteste.com.br" "endparent"]
</dd>
<dd>
<label for="mensagem">*Mensagem</label>
[textarea* mensagem id:mensagem class:input-default]
</dd>
<dd>
[submit class:btn-default class:color-wine class:alignright "Enviar"]
</dd>
</dl>
jQuery(function($){
// Reference code by - http://wordpress.stackexchange.com/a/119942
// search for parent_ items
var foundin = $('option:contains("parent_")');
$.each(foundin, function(value) {
var updated = $(this).val().replace("parent_","");
// find all following elements until endparent
$(this).nextUntil('option:contains("endparent")')
.wrapAll('<optgroup label="" data-title="'+ updated +'"></optgroup>');
});
// remove placeholder options
$('option:contains("parent_")').remove();
$('option:contains("endparent")').remove();
});
jQuery(function($){
// clear value Selecione
$('option[value="Selecione"]').attr('value','');
// create var $sel
var $sel = $('select[name="departamento"]');
// show only first optgroup and hide rest
$("optgroup:not(:first)", $sel).hide();
// function for find "Selecione um Empresa" and change optgroup correct
$('select[name="selecione-uma-empresa"]').change(function(){
$(this).find("option:selected").each(function(){
if( $(this).attr("value") == "Empresa X" ){
$("optgroup, optgroup > option", $sel).hide();
$('optgroup[data-title="Empresa X"]').children().andSelf().show();
}
else if($(this).attr("value")=="Empresa Y"){
$("optgroup, optgroup > option", $sel).hide();
$('optgroup[data-title="Empresa Y"]').children().andSelf().show();
}
else{
$("optgroup, optgroup > option", $sel).hide();
$('optgroup[data-title="Empresa do Grupo"]').children().andSelf().show();
}
});
});
});

Visão Simplicada da criação do grupos:

[select* departamento id:departamento class:select-default

"Selecione"

"parent_Empresa do Grupo"

"Administrativo|administrativo@teste.com.br"
"Financeiro|financeiro@teste.com.br"
"Marketing|marketing@teste.com.br"
"Outros|outros@teste.com.br"

"endparent"

"parent_Empresa X"

"Administrativo|administrativo@teste.com.br"
"Marketing|marketing@teste.com.br"

"endparent"

"parent__Empresa Y"

"Financeiro|financeiro@teste.com.br"
"Outros|outros@teste.com.br"

"endparent"

]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.