How to integrate a select into a table?

Asked

Viewed 276 times

5

I have a table. In Plano 1, I used the jQuery Heapbox plugin, but since I’m not good with Javascript, I didn’t know how to set it up, I would like the select heapbox in Plano 1 to have the same effect as the select normal, with the script that the member Sergio helped me develop.

Follows the table:

<!--end:theme-option-->
<div class="flx-wrapper">
    <div class="wrapper clearfix">
        <br>
        <br>
        <section class="table-3col clearfix">
                    <div class="pricing-column">
                <div class="pricing-header">
                    <div class="pricing-title pt-azul1">Plano 1</div>
                    <div class="price azul1"><div class="trans"><sup>R$</sup><span>9,99</span>/mês</div></div>
                </div>
                <!--end:pricing-header -->
                <ul class="features ">
                    <li>
                        <p class="p-icone-tabela">
                      Exemplo com <a href="http://www.bartos.me/heapbox/#examples" target="_blank">HeapBox</a>
                      <div class="clear"></div>
                            <select class="basic-example select-ciclos" name="select">
    <option value="<sup>R$</sup><span>9,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>28,77</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>54,14</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>99,99</span>/ano">Anual -16%</option>
</select>

                      </p>
</li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i>5GB de espaço</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-exchange"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i>E-mails ilimitados</p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-globe"></i>1 domínio</p></li>
                        </ul><!--end:features-->                        
                        <div class="pricing-footer">
                            <a class="flx-blue-button flx-button" href="#">Assinar</a>
                        </div><!--end:pricing-footer-->         
                    </div><!--end:pricing-column-->
                    <div class="pricing-column">
                        <div class="pricing-header">
                            <div class="pricing-title pt-azul1">Plano 2</div>
                            <div class="price azul1"><div class="trans"><sup>R$</sup><span>16,99</span>/mês</div></div>
                        </div><!--end:pricing-header -->
                        <ul class="features">
                            <li>
                            <p class="p-icone-tabela">
                            Normal com meu script
                            <div class="clear"></div>
                            <select class="select-ciclos" name="select">
                                <option value="<sup>R$</sup><span>16,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>48,93</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>93,78</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>169,99</span>/ano">Anual -16%</option> 
                            </select></p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i>6GB de espaço</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-exchange"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i>E-mails ilimitados</p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-globe"></i>2 domínios</p></li>
                        </ul><!--end:features-->
                        <div class="pricing-footer">
                            <a class="flx-blue-button flx-button" href="#">Assinar</a>
                        </div><!--end:pricing-footer-->         
                    </div><!--end:pricing-column-->
                    <div class="pricing-column">
                        <div class="pricing-header">
                            <div class="pricing-title pt-azul1">Plano 3</div>
                            <div class="price azul1"><div class="trans"><sup>R$</sup><span>24,99</span>/mês</div></div>
                        </div><!--end:pricing-header -->
                        <ul class="features ft-ultimo">
                            <li><p class="p-icone-tabela">
                            Normal com meu script
                            <div class="clear"></div>
                            <select class="select-ciclos" name="select">
                                <option value="<sup>R$</sup><span>24,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>71,97</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>137,94</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>249,99</span>/ano">Anual -16%</option>
                            </select></p></li> 
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i>7GB de espaço</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-exchange"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i>E-mails ilimitados</p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-globe"></i>3 domínios</p></li>
                        </ul><!--end:features-->
                        <div class="pricing-footer pf-ultimo">
                            <a class="flx-blue-button flx-button" href="#">Assinar</a>
                        </div><!--end:pricing-footer-->         
                    </div><!--end:pricing-column-->                
                </section><!--end:table-3col-->
        <br>
        <br>

JS

$('select.select-ciclos').on('change', function () {
    var mostrador = $(this).closest('.pricing-column').find('.trans');
    var val = this.value;
    mostrador.animate({
        opacity: 0
    }, 100, function () {
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 100)
    })
});

$(document).ready(function() {
    $(".basic-example").heapbox();
});

Jsfiddle.

javascript html css html-select

  • You want to maintain the functionality that normal selects have using the headbox style, correct?

  • Yes, that’s right! Thank you.

1 answer

3


How you came to use the Heapbox event onChange was not shooting as it happens in the native select. Heapbox handles the event in a different way, so the logic to change the value in the column should be inserted into the Heapbox event as in documentation of the same:

 $(".select-ciclos").heapbox({
'onChange':function(value,src){

    var mostrador = $(src).closest('.pricing-column').find('.trans');
    var val = value;
    mostrador.animate({
        opacity: 0
    }, 100, function () {
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 100)
    })
    }
});  

$(document).ready(function() {
   $(".select-ciclos").heapbox();
 });

  • Man, thank you very, very much, you helped me a lot, I’m sorry if it was blackcurrant is that I get nervous when I’m anxious rsrs, it wasn’t my intention! Thank you very much, heartily! you saved my day! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you!

  • 1

    quiet, good that it worked, but I advise you to go a little deeper in javascript if you need to use more times, using jquery plugins is a good practice when we have domain, but when we do not know it can complicate and much our life, but good that I helped you, have a good night

  • Can you point me to some places where I can learn more javascript? I’m a "Noob" when it comes to javascript.

  • 1

    @Alexandrelopes There is nothing wrong with thanking someone for an answer, but remember that the best way to do this is by voting and accepting the answer as correct (as you did). 1, 2 or 10 thank you comments have very little value after that, serving more to pollute the site.

Browser other questions tagged javascript html css html-select

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