Modify in real time

Question

I made a simple script with Jquery that changes some texts in select of sizes in a store:

<select>
    <option value="">Escolha seu tamanho...</option>
    <option value="476" price="0" data-label="p">P</option>
    <option value="473" price="0" data-label="m">M</option>
    <option value="474" price="0" data-label="g">G</option>
    <option value="475" price="0" data-label="gg">GG</option>
</select>

---

$j(function(){
    $j('option[data-label="p"]').text('P - 34');
    $j('option[data-label="m"]').text('M - 36/38');
    $j('option[data-label="g"]').text('G - 40/42');
    $j('option[data-label="gg"]').text('GG - 44');
});

But, for example, when I choose the size on select, kind of the options update themselves by pulling the child product data.

That is, if I mark "M", it will sort of "refresh the page" (in case update only the select) and what I put with Jquery will disappear, and come back only when I refresh the page again.

I’m a layman still in Jquery, so I thought I’d create a loop, but kind of think it would slow down the site.

How then could I check if the text is the same as what I want or not, in real time, to always stay what I put? With Ajax would it work? I’m asking because what I still know in Ajax is little, so I have no knowledge.