How to integrate a select into a table?

Navigation
5

I have a table . In Plan 1, I used the jQuery HeapBox plugin, however as I'm not good with JavaScript, I did not know how to configure it, I'd like the select heapbox in Plan 1 to have the same effect as the normal select, with the script that the < a href="https://en.stackoverflow.com/users/129/sergio"> Sergio helped me develop.

Follow 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 .

    
asked by anonymous 02.05.2014 / 01:02

1 answer

3

As you started using the HeapBox the onChange event was not firing as it does in the native select. The HeapBox handles the event in a different way so the logic to change the value in the column must be inserted inside the HeapBox event as it is in documentation of it: 

 $(".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();
 });
    
02.05.2014 / 04:46
load independent process Enable / Disable Tab according to checkbox situation