How to do operations with a select with jquery?

Navigation
1

I have this code and every time I choose a value of select makes some operations, what I need is that when I re-select a smaller amount than the one I already selected, I will do the operations again. 

$('#boton2').click(function(){
       let z = "<div style='display: flex; justify-content: flex-end; margin-top: 16%; margin-right: 5%'><select class='opciones3' name='opciones3' style='width: 25%; font-size: initial; font-weight: bold'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></div>";
       $('#matiza').after(z);

   $('.opciones3').change(function () {
        let r = parseInt($('p.price').text());
        let suma3 = parseInt($('p.price').text());
        $('.opciones3 :selected').each(function() {
            suma3 *= Number($(this).val());
        });
        let x = parseInt($('p#subtotal').text());
        let ttl = x + suma3 - r;
        let sttl = ttl * 0.1;
        let fnl = ttl - sttl;
        document.getElementById("subtotal").innerHTML = ttl.toFixed(2);
        document.getElementById("ahorro").innerHTML = sttl.toFixed(2);
        document.getElementById("totalcompra").innerHTML = fnl.toFixed(2);
        });
   });

html 

    <div id='principal'><input class='Survey' type='hidden' name='Survey[]'  id='ID' value=''/>" +
                "<div class='quoter-list' style='height: auto; display: flex'><div style='margin-top: 4%;'>
    <a rel='shadowbox;' href='https://www.youtube.com/embed/9q8eqQDyAlI?autoplay=1'>
    <img src='/static/v2/images/img1-1.png' style='width: 100px; height: 100px;'>
    </a><
    /div>
    <div class='quoter-l' style='margin-top: 1%;'><img src='/static/v2/images/img5-2.png' style='width: 70px; height: 70px; '><img src='/static/v2/images/img5-2.png' style='width: 70px; height: 70px;'></div>
    <div class='tt-dc' style='margin-left: 16px'><p class='title' style='font-family: Bariol; width: 98%;text-align: justify;color: #3c144e; margin-top: 5px; font-size: 20px;font-weight: bold;padding-left: 10px; letter-spacing: -0.9px;'></p>
<div style='margin-top: auto'><p class='descp' style='font-family: Bariol;width: 98%;text-align: justify;color: #505050; margin-top: 5px; font-size: 16px;padding-left: 10px; letter-spacing: -0.7px; line-height: 1.25;font-style: normal;font-weight: normal'></p></div>  </div> <div style='display: block'>
<div style='display: flex; justify-content: flex-end; margin-top: 16%; margin-right: 5%' id='matiza'>
</div>
<div style='display: flex; margin-top: 26%'>
<button type='button' class='add quit' onclick='remove()'>Quitar</button>
<p style='display: inline-flex; margin-bottom: 5px;align-self: flex-end;font-size: 24px;font-family:Bariol; color: #8dc641;font-weight: bold;'>$</p>
<p class='price' style='text-align: right; margin-right: 5px; margin-bottom: 5px; align-self: flex-end; font-size: 24px; color: #8dc641; font-family: Bariol; font-weight: bold; letter-spacing: -1px;line-height: normal;font-stretch: normal; font-style: normal'>
</p>
</div>
</div>
</div>
</div>
</div>

How can I do it?

    
asked by Isabel Gomez 24.07.2017 в 17:54
source

1 answer

0

You could use localStorage to save the value and identify if it is less than the previous one. Since I do not know what value you want to take, I have taken the value of the select first, and then those of the variables named r and suma3 .

Your code would look like this: 

$('#boton2').click(function(){
       let z = "<div style='display: flex; justify-content: flex-end; margin-top: 16%; margin-right: 5%'><select class='opciones3' name='opciones3' style='width: 25%; font-size: initial; font-weight: bold'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></div>";
       $('#matiza').after(z);

   $('.opciones3').change(function () {
        if(localStorage.getItem("valorSelect")==null || localStorage.getItem("valorSelect")>=r){
          localStorage.setItem("valorSelect",this.val());
        }
        if(localStorage.getItem("valorSelect")<=this.val()){
          let r = parseInt($('p.price').text());
          if(localStorage.getItem("select1")==null || localStorage.getItem("select1")>=r){
             localStorage.setItem("select1", r);//solo cuando sea menor o null entrará
          }
          let suma3 = parseInt($('p.price').text());
          if(localStorage.getItem("select2")==null || localStorage.getItem("select2")>=suma3){
             localStorage.setItem("select2", suma3);//solo cuando sea menor o null entrará
          }
          if(localStorage.getItem("select1")<=r && localStorage.getItem("select2")<=suma3){
            $('.opciones3 :selected').each(function() {
                suma3 *= Number($(this).val());
            });
            let x = parseInt($('p#subtotal').text());
            let ttl = x + suma3 - r;
            let sttl = ttl * 0.1;
            let fnl = ttl - sttl;
            document.getElementById("subtotal").innerHTML = ttl.toFixed(2);
            document.getElementById("ahorro").innerHTML = sttl.toFixed(2);
            document.getElementById("totalcompra").innerHTML = fnl.toFixed(2);
          }//cierro if
        }//cierro primer if
        });
   });

Documentation

answered by 24.07.2017 / 18:18
source
View value in modal window with asp.net vb.net and boostrap Create a loop for a word counter on a list