Select with different behavior on mobile

Question

I’m making a script (I don’t know if it’s the best way, I’m beginner).

Script behavior: The behavior of the script is as follows: There is a select asking how many pizzas you want, when answering I release the select asking if you want stuffed border, if the answer is yes, I make appear the selects with the border options (will always appear the same amount - maximum 5 - based on the number of pizzas of the first select).

So I do practically the same thing for soda, I ask if the person wants soda, the amount and then the choices appear.

The problem:

Only on mobile and in the soft drink select, to appear the options of soft drinks based on the number of soft drinks, I have to select the option and click again in the selection field for the correct behavior to happen. On the desktop this behavior does not happen, by clicking once the script already works.

As Script got big I put it complete in Codepen: https://codepen.io/gustavo-bove/pen/xxZKrbj

    $("#refriQuestion").click(function () {

    if ($("#refriQuestion option:selected").val() == '1')
    {
        $("#refrisChoose1").show();
        $("#refrisChoose2").hide();
        $("#refrisChoose3").hide();
        $("#refrisChoose4").hide();
        $("#refrisChoose5").hide();

    }

    if ($("#refriQuestion option:selected").val() == '2')
    {
        $("#refrisChoose1").show();
        $("#refrisChoose2").show();

        $("#refrisChoose3").hide();
        $("#refrisChoose4").hide();
        $("#refrisChoose5").hide();


    }

    if ($("#refriQuestion option:selected").val() == '3')
    {
        $("#refrisChoose1").show();
        $("#refrisChoose2").show();
        $("#refrisChoose3").show();
        $("#refrisChoose4").hide();
        $("#refrisChoose5").hide();
    }


    if ($("#refriQuestion option:selected").val() == '4')
    {
        $("#refrisChoose1").show();
        $("#refrisChoose2").show();
        $("#refrisChoose3").show();
        $("#refrisChoose4").show();

        $("#refrisChoose5").hide();

    }

    if ($("#refriQuestion option:selected").val() == '5')
    {
        $("#refrisChoose1").show();
        $("#refrisChoose2").show();
        $("#refrisChoose3").show();
        $("#refrisChoose4").show();
        $("#refrisChoose5").show();

    }

});

$("#refrisChoose1").click(function ()
{

    if ($("#refrisChoose1 option:selected").val() == '1')
    {
        refriSelected1 = fanta;
        calcular();

    }

    if ($("#refrisChoose1 option:selected").val() == '2')
    {
        refriSelected1 = fanta_uva;
        calcular();
    }

    if ($("#refrisChoose1 option:selected").val() == '3')
    {
        refriSelected1 = soda;
        calcular();

    }

    if ($("#refrisChoose1 option:selected").val() == '4')
    {
        refriSelected1 = pepsi;
        calcular();
    }

    if ($("#refrisChoose1 option:selected").val() == '5')
    {
        refriSelected1 = guarana;
        calcular();

    }

});


$("#refrisChoose2").click(function ()
{

    if ($("#refrisChoose2 option:selected").val() == '1')
    {
        refriSelected2 = fanta;
        calcular();

    }

    if ($("#refrisChoose2 option:selected").val() == '2')
    {
        refriSelected2 = fanta_uva;
        calcular();

    }

    if ($("#refrisChoose2 option:selected").val() == '3')
    {
        refriSelected2 = soda;
        calcular();

    }

    if ($("#refrisChoose2 option:selected").val() == '4')
    {
        refriSelected2 = pepsi;
        calcular();

    }

    if ($("#refrisChoose2 option:selected").val() == '5')
    {
        refriSelected2 = guarana;
        calcular();

    }

});


$("#refrisChoose3").click(function ()
{

    if ($("#refrisChoose3 option:selected").val() == '1')
    {
        refriSelected3 = fanta;
        calcular();

    }

    if ($("#refrisChoose3 option:selected").val() == '2')
    {
        refriSelected3 = fanta_uva;
        calcular();

    }

    if ($("#refrisChoose3 option:selected").val() == '3')
    {
        refriSelected3 = soda;
        calcular();

    }

    if ($("#refrisChoose3 option:selected").val() == '4')
    {
        refriSelected3 = pepsi;
        calcular();
    }

    if ($("#refrisChoose3 option:selected").val() == '5')
    {
        refriSelected3 = guarana;
        calcular();

    }

});

$("#refrisChoose4").click(function ()
{

    if ($("#refrisChoose4 option:selected").val() == '1')
    {
        refriSelected4 = fanta;
        calcular();

    }

    if ($("#refrisChoose4 option:selected").val() == '2')
    {
        refriSelected4 = fanta_uva;
        calcular();


    }

    if ($("#refrisChoose4 option:selected").val() == '3')
    {
        refriSelected4 = soda;
        calcular();

    }

    if ($("#refrisChoose4 option:selected").val() == '4')
    {
        refriSelected4 = pepsi;
        calcular();

    }

    if ($("#refrisChoose4 option:selected").val() == '5')
    {
        refriSelected4 = guarana;
        calcular();
    }

});


$("#refrisChoose5").click(function ()
{

    if ($("#refrisChoose5 option:selected").val() == '1')
    {
        refriSelected5 = fanta;
        calcular();

    }

    if ($("#refrisChoose5 option:selected").val() == '2')
    {
        refriSelected5 = fanta_uva;
        calcular();

    }

    if ($("#refrisChoose5 option:selected").val() == '3')
    {
        refriSelected5 = soda;
        calcular();

    }

    if ($("#refrisChoose5 option:selected").val() == '4')
    {
        refriSelected5 = pepsi;
        calcular();

    }

    if ($("#refrisChoose5 option:selected").val() == '5')
    {
        refriSelected5 = guarana;
        calcular();

    }

});

Correct behavior on the Desktop:

Answer 1

The phone may be processing the select element so the click is beyond the DOM, try

Troquar

   $("#refriQuestion").click(function () {

For

 $("#refriQuestion").change(function () {

Thus, linking Event Handler to select and not to choose.

https://api.jquery.com/change/ https://api.jquery.com/on/ (for .on("change", function() {})