Change background color of jquery multiselect plugin

Asked

Viewed 667 times

0

Guys I’m using the Jquery multiselect plugin https://plugins.jquery.com/tag/multiselect/.

It occurs that it is generating me two difficulties.

The first difficulty is with CSS: I need to change the colors he puts in the check boxes and fonts. I’ve been looking all over for this and I can’t find it.

inserir a descrição da imagem aqui

The other difficulty is with Jquery itself. I need to create a function that, when clicking on the first option, ie indifferent, the other fields are disabled for choice. And, if clicked again releases the other fields. Still, if any field that is not the indifferent is selected, then the indifferent is disabled. Or find where I can change the text that appears in the SELECT box for each of the select’s.

jquery.multiselect.css

.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.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 /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }
.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label { border:none }

HTML:

<div class="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());    
  })

As far as I could 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>
jquery css css3

  • Hi Carlos, you could put your source code (css, html and js) here so we can see how your select is being customized?

  • yes, I did. But it can also be seen in http://www.dinamicaimoveis.com.br/new/

1 answer

1


To change the background color, you can add this to your css:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
     background: blue !important /* escolha a cor que você quiser */
}

And as for the case of the indifferent, I advise you to improve the identification of the elements, but if you want it to work exactly the way your html is, you can use the following script:

$(document).ready(function(){
  $ui = $(".ui-multiselect-checkboxes").first()
  $indiferente = $ui.find("[title=Indiferente]");
  $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
    }           
  })
})
  • 1

    Well, about the css thanks, I will separate each and give different backgrounds-color. but as for Jquery I think it will be easier to receive with php and check if there is the 'Indifferent' option. If there is, I search all, It will be too extensive to add function check the opposite too: if no item is selected, then the indifferent is disabled. This is gonna get very confusing.

  • I just made an edit, now if any other checkbox other than "Indifferent" is selected, "Indifferent" is disabled

  • This is going to be something kind of illogical. Imagine the scene; You marked one that is not indifferent, at that moment, indifferent is disabled. Ok. Marked the next 'n' not indifferent. Then, and if you uncheck all the non indifferent marked, when unchecking the last, the indifferent must be enabled again. That sounds kind of pointless and surreal. No?

  • Well, not so much. To leave it that way just put the attribute checked by default in the indifferent input. It depends on how you are designing the system, everything can make sense in this world x)

  • But if I put the attribute checked by default in the indifferent input this will not guarantee that by unselecting all selected Not Helpless, it will be enabled again. Will?

  • Well, in that case it is not worth using the disabled. We can do this only with the checked. Test the last modifications I made, and tell me if they apply to your case

  • 1

    In fact, it was immensely better than I expected. I will now study what you did to get me to learn this right. Thank you very much. Now, not wanting to abuse his friend’s help, I once saw an effect on a site that I can’t remember where a div was slowly appearing from the top to the bottom of it. Very nice. I’ve seen some effects on the net but nothing like what I’ve seen. Do you know this effect? You know how I can implement?

  • Well, you can use the animation effects of css itself to do this. It is not up to this question this explanation, if you are really interested, ask another question to facilitate when other users have the same question

  • That’s correct. I’ll ask the question!

  • Still about css, I haven’t been able to change 3 things in the selector yet: 1) The border color, 2) The orange background color 3) The arrow color. Can help me?

  • As new image changed in question

  • Returning to the case of the indifferent, does it have a way to, add 1 option to the counter of marked options? Because at the time of submitting the form, as it has not been clicked any option although the indifferent is marked it is not being computed yet and the form is not dispatched. Any appeal in this case?

  • Try this: $("#ui-multiselect-type-option-0"). click(); $("#ui-multiselect-neighborhood-option-0"). click()

  • Puts inside the $(Document) block. ready(Function(){});

  • LF Ziron, already inside the block. the previous idea until it appeared there "1 Selected" But the form still does not fire. Only if I really click on an item that will. It would be interesting if you could show it to face "indifferent" and already give to submit the form

  • Don’t forget to uncheck it as default in your html, or else the code will uncheck it. I’ve been looking here, and you’ll also have to add after the previous code: $("#neighborhood"). multiselect("refresh"); $("#type"). multiselect("refresh");

  • not so. I will put like this there at the end of the question. Take a look please do endo where I am missing?

Show 12 more comments

Browser other questions tagged jquery css css3

You are not signed in. Login or sign up in order to post.