Personal I'm using the JQuery multiselect plugin link .
It happens that it is giving me two difficulties.
The first difficulty is with CSS: I need to change the colors that it places in checkboxes and fonts. I've already looked for where this is and I did not find it.
TheotherdifficultyiswithJQueryitself.Ineedtocreateafunctionthat,whenclickingonthefirstoption,thatis,indifferent,theotherfieldsaredisabledtochoose.And,ifclickedagainreleasestheremainingfields.Still,ifanyfieldotherthantheindifferentisselected,thentheindifferentoneisdisabled.OrfindwhereIcanchangethetextthatappearsintheSELECTboxforeachoftheselect's.
jquery.multiselect.css
.ui-multiselect{padding:2px02px4px;text-align:left}.ui-multiselectspan.ui-icon{float:right}.ui-multiselect-single.ui-multiselect-checkboxesinput{position:absolute!important;top:auto!important;left:-9999px;}.ui-multiselect-single.ui-multiselect-checkboxeslabel{padding:5px!important}.ui-multiselect-header{margin-bottom:3px;padding:3px03px4px}.ui-multiselect-headerul{font-size:0.9em}.ui-multiselect-headerulli{float:left;padding:010px00}.ui-multiselect-headera{text-decoration:none}.ui-multiselect-headera:hover{text-decoration:underline}.ui-multiselect-headerspan.ui-icon{float:left}.ui-multiselect-headerli.ui-multiselect-close{float:right;text-align:right;padding-right:0}.ui-multiselect-menu{display:none;padding:3px;position:absolute;z-index:10000;text-align:left}.ui-multiselect-checkboxes{position:relative/*fixesbuginIE6/7*/;overflow-y:scroll}.ui-multiselect-checkboxeslabel{cursor:default;display:block;border:1pxsolidtransparent;padding:3px1px}.ui-multiselect-checkboxeslabelinput{position:relative;top:1px}.ui-multiselect-checkboxesli{clear:both;font-size:0.9em;padding-right:3px}.ui-multiselect-checkboxesli.ui-multiselect-optgroup-label{text-align:center;font-weight:bold;border-bottom:1pxsolid}.ui-multiselect-checkboxesli.ui-multiselect-optgroup-labela{display:block;padding:3px;margin:1px0;text-decoration:none}/*removelabelbordersinIE6becauseIE6doesnotsupporttransparency*/*html.ui-multiselect-checkboxeslabel{border:none}
HTML:
<divclass="buscaImovel"><br />
<h1 >Pesquise pelo imóvel que deseja</h1>
QUERO COMPRAR E QUERO VENDER<br />
<form action="busca.php" method="post">
<input type="hidden" id="tipos" name="tipos">
<input type="hidden" id="bairros" name="bairros">
<div class="camposBusca">
<?php $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
<label class="labelPequeno">Tipo</label>
<br />
<select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
<option value="Indiferente">Indiferente</option>
<?php
if ($tiposImoveis == null) {
echo "<option value=''>Não há tipo cadastrado ainda!</option>";
} else {
foreach ($tiposImoveis as $tipoImovel) {
echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
}
}
?>
</select>
</div>
<div class="camposBusca">
<?php $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
<label class="labelPequeno">Bairro</label>
<br />
<select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
<option value="Indiferente">Indiferente</option>
<?php
if ($bairrosImoveis == null) {
echo "<option value=''>Não há tipo cadastrado ainda!</option>";
} else {
foreach ($bairrosImoveis as $bairrosImovel) {
echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
}
}
?>
</select>
</div>
<div class="camposBusca">
<button>Buscar</button>
</div>
</form>
<div style="height:15px;"></div>
<div class="alternativaEscolha"> <a href="buscaAvancada.php">
<label class="labelGrande" style="background-color:#CCC;">Busca Avançada</label>
</a> </div>
<div class="alternativaEscolha">
<!--abrir popUp-->
<a href="buscaCodigo.php">
<label class="labelGrande" style="background-color:#CCC;">Busca por Código</label>
</a> </div>
</div>
JQuery
$(function(){
$("#tipo").multiselect();
$("#bairro").multiselect();
});
$("#tipo").multiselect().change(function() {
$("#tipos").val($("#tipo").multiselect().val());
})
$("#bairro").multiselect().change(function() {
$("#bairros").val($("#bairro").multiselect().val());
})
How far did you go:
<script type="text/javascript">
$(document).ready(function(){
for (i = 0; i < $(".ui-multiselect-checkboxes").length; i++) {
$ui = $(".ui-multiselect-checkboxes");
$indiferente = $ui.find("[title=Indiferente]");
$indiferente.prop("checked", true);
$ui.find("input").change(function(){
if($(this).attr("title") != "Indiferente" && this.checked){
$indiferente.prop("checked", false); //desmarco indiferente se algum
//outro for selecionado
}
if(!$ui.find("input:checked").length){ //se nenhum input estiver marcado
$indiferente.prop("checked",true); //marco indiferente
}
})
$indiferente.change(function(){ //quando indiferente mudar
if(this.checked){ //se estiver marcado
$ui.find("input").not("[title=Indiferente]").prop("checked", false);
//desmarco outros
}
})
$("#ui-multiselect-tipo-option-0").click(); $("#ui-multiselect-bairro-option-0").click();
}
})
$(function(){
$("#tipo").multiselect();
$("#bairro").multiselect();
});
</script>
<script>
$(document).ready(function(e){
$(".fechar").click(function() {
$(".buscaCodigo").hide();
$(".fechar").hide();
});
$(".alternativaEscolha").click(function() {
$(".buscaCodigo").show();
$(".fechar").show();
});
});
</script>
<div class="fechar">
<img src="_img/btn-close.png" style="width:50px;" />
</div>
<div class="buscaCodigo">
<form action="busca.php" method="post">
<input type="hidden" name="acao" value="buscaCodigo" />
<label>Código</label><input type="text" class="typeTextMedio" id="codigo" name="codigo" required />
<input type="submit">
</form>
</div>
<div class="buscaImovel"><br />
<h1 class="h1Centralizado">Pesquise pelo imóvel que deseja</h1>
<div class="divBusca">
<form action="busca.php" method="post">
<input type="hidden" name="acao" value="buscaPrincipal">
<div class="camposBusca">
<?php $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
<label class="labelPequeno">Tipo</label>
<br />
<select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
<option value="Indiferente">Indiferente</option>
<?php
if ($tiposImoveis == null) {
echo "<option value=''>Não há tipo cadastrado ainda!</option>";
} else {
foreach ($tiposImoveis as $tipoImovel) {
echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
}
}
?>
</select>
</div>
<div class="camposBusca">
<?php $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
<label class="labelPequeno">Bairro</label>
<br />
<select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
<option value="Indiferente">Indiferente</option>
<?php
if ($bairrosImoveis == null) {
echo "<option value=''>Não há tipo cadastrado ainda!</option>";
} else {
foreach ($bairrosImoveis as $bairrosImovel) {
echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
}
}
?>
</select>
</div>
<div class="camposBusca" style="height:55px; width:55px; margin-bottom:0;">
<input type="submit" style="background-image: url(_img/pesquisar.png); background-repeat:no-repeat; background-size:contain;" value="Pesquisar" />
</div>
</form>
</div>
<div style="height:15px;"></div>
<div class="alternativaEscolha">
<a href="buscaAvancada.php">
<label class="labelGrande" style="background-color:#CCC;">Busca Avançada</label>
</a>
</div>
<div class="alternativaEscolha">
<!--abrir popUp-->
<label class="labelGrande" style="background-color:#CCC; color:#FFF">Busca por Código</label>
</div>
</div>
<script>
$("#tipo").multiselect().change(function() {
$("#tipos").val($("#tipo").multiselect().val());
})
$("#bairro").multiselect().change(function() {
$("#bairros").val($("#bairro").multiselect().val());
})
</script>