Automatically select <option> with click/select action

Question

I have the following form:

<table id="products_stock" class="table">
   <thead>
      <tr>
         <th class="active">Produto</th>
         <th class="active">Categoria</th>
         <th class="active">Subcategoria</th>
         <th class="active">Fornecedor</th>
         <th class="active">Estoque</th>
         <th class="active">Unitário</th>
         <th class="active">Quantidade</th>
         <th class="active">Total</th>
         <th class="active">#</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Mouse com fio</td>
         <td>Periféricos</td>
         <td>Mouses com Fio</td>
         <td>
            <select class="form-control supplier supplier_1" name="supplier" id="supplier" data-product_id="1" aria-invalid="false">
               <option value="0">Selecione um fornecedor</option>
               <option value="1">Estoque Inicial</option>
               <option value="2">Fornecedor</option>
               <option value="3">Fornecedor 2</option>
            </select>
         </td>
         <td style="width: 15%" class="stock_qty_1">0</td>
         <td style="width: 10%" class="stock_unity_1">R$&nbsp;50,00</td>
         <td style="width: 10%"><input type="number" class="form-control stock_purchase_1" name="stock_purchase" id="stock_purchase[]" value="0" autocomplete="off"></td>
         <td style="width: 10%" class="stock_total_1">-</td>
         <td style="width: 5%"><button type="button" class="fa fa-shopping-cart btn btn_purchase_1 btn-warning" disabled="" data-product_id="1"></button></td>
      </tr>
      <tr>
         <td>Mouse Logitech</td>
         <td>Periféricos</td>
         <td>Mouses com Fio</td>
         <td>
            <select class="form-control supplier supplier_2" name="supplier" id="supplier" data-product_id="2" aria-invalid="false">
               <option value="0">Selecione um fornecedor</option>
               <option value="1">Estoque Inicial</option>
               <option value="2">Fornecedor</option>
               <option value="3">Fornecedor 2</option>
            </select>
         </td>
         <td style="width: 15%" class="stock_qty_2">20</td>
         <td style="width: 10%" class="stock_unity_2">R$&nbsp;26,00</td>
         <td style="width: 10%"><input type="number" class="form-control stock_purchase_2" name="stock_purchase" id="stock_purchase[]" value="0" autocomplete="off"></td>
         <td style="width: 10%" class="stock_total_2">-</td>
         <td style="width: 5%"><button type="button" class="fa fa-shopping-cart btn btn_purchase_2 btn-warning" disabled="" data-product_id="2"></button></td>
      </tr>
      <tr>
         <td>Mouse Mtek</td>
         <td>Periféricos</td>
         <td></td>
         <td>
            <select class="form-control supplier supplier_3" name="supplier" id="supplier" data-product_id="3" aria-invalid="false">
               <option value="0">Selecione um fornecedor</option>
               <option value="1">Estoque Inicial</option>
               <option value="2">Fornecedor</option>
               <option value="3">Fornecedor 2</option>
            </select>
         </td>
         <td style="width: 15%" class="stock_qty_3">50</td>
         <td style="width: 10%" class="stock_unity_3">R$&nbsp;18,50</td>
         <td style="width: 10%"><input type="number" class="form-control stock_purchase_3" name="stock_purchase" id="stock_purchase[]" value="0" autocomplete="off"></td>
         <td style="width: 10%" class="stock_total_3">-</td>
         <td style="width: 5%"><button type="button" class="fa fa-shopping-cart btn btn_purchase_3 btn-warning" disabled="" data-product_id="3"></button></td>
      </tr>
   </tbody>
</table>

In it I have Initial Stock, as supplier with id=1. I need, when loading this page, everything id=1 already selected. I know I can use Selected='Selected', but then, will not be triggered the other jQuery I have through the selection of this option.

I need to simulate a click by selecting the option. To then automatically load the next action.

For better understanding, below follows the initial code in which it is loaded when selected supplier: (this code works as I need).

// Habilita campos para preencher valores e quantidade
$(".supplier").on('change', function() {

    var supplier = $(this).val();
    var product_id = $(this).attr('data-product_id');

    if(supplier==0){

        $(".stock_purchase_"+product_id).prop("disabled", true);
        $(".stock_purchase_"+product_id).val('0');

        $(".stock_unity_push_"+product_id).prop("disabled", true);
        $(".stock_unity_push_"+product_id).val("R$ 0,00");

        $(".btn_purchase_"+product_id).prop("disabled", true);
        $(".stock_total_"+product_id).html('-');            

    } else {

        $(".stock_purchase_"+product_id).prop("disabled", false);
        $(".stock_unity_push_"+product_id).prop("disabled", false);

        $(".stock_unity_push_"+product_id).maskMoney({
            prefix: "R$ ",
            decimal: ",",
            thousands: "."
        });

        // Efetua calculo dos campos
        $(".stock_purchase_"+product_id).keyup(function(){
            if(($(".stock_purchase_"+product_id).val())==0){
                $(".btn_purchase_"+product_id).prop("disabled", true);
                $(".stock_total_"+product_id).html('-');
            } else {
                var stock_unity_push = $(".stock_unity_push_"+product_id).val();
                var stock_unity_push_return = stock_unity_push.replace("R$ ", "");
                var stock_unity_push_return_b = stock_unity_push_return.replace(/\./g, "").replace(",", ".") || 0;

                var calc = ((parseFloat(stock_unity_push_return_b))*$(".stock_purchase_"+product_id).val()).toFixed(3);
                calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
                calc = parseFloat(calc);

                $(".stock_total_"+product_id).html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));
                $(".btn_purchase_"+product_id).prop("disabled", false);
            }
        });

        // Insere no carrinho
        // Purchase Product
        $(".btn_purchase_"+product_id).on('click', function (e){
            var product_id =  $(this).attr('data-product_id');
            var stock_purchase = $(".stock_purchase_"+product_id).val();
            var stock_unity_push = $(".stock_unity_push_"+product_id).val();
            var supplier = $(".supplier_"+product_id).val();

            var stock_unity = $(".stock_unity_"+product_id).html();
            var stock_unity_return = stock_unity.replace("R$ ", "");
            var stock_unity_return_b = stock_unity_return.replace(/\./g, "").replace(",", ".") || 0;

            if(stock_unity_push==undefined){
                $.ajax({
                    type: "POST", 
                    data: {product_id:product_id, stock_purchase:stock_purchase, price_unity:stock_unity_return_b, supplier:supplier},
                    url: BASE_URL + "purchase/set_cart",
                    success: function(data) {
                        swal("Muito bem!", "Produto adicionado ao carrinho com sucesso!", "success");
                    }
                });         
            } else {
                $.ajax({
                    type: "POST", 
                    data: {product_id:product_id, stock_purchase:stock_purchase, stock_unity_push:stock_unity_push, supplier:supplier},
                    url: BASE_URL + "purchase/set_cart",
                    success: function(data) {
                        swal("Muito bem!", "Produto adicionado ao carrinho com sucesso!", "success");
                    }
                }); 
            }



            $("#cart_list").html('<hr><div style="padding: 25px"><center><i class="fa fa-circle-o-notch fa-spin" style="font-size:42px"></i><br>Atualizando...</center></div>');

            setTimeout(function(){
                $.ajax({
                    type: "POST", 
                    data: {},
                    url: BASE_URL + "purchase/cart_list",
                    success: function(data) {
                        $("#cart_list").html(data);
                    }
                });            
            }, 200);

        });         

    }


}); 

Answer 1

You can trigger your own event by loading the function, example:

$(".supplier").on('change', function(event) {
  //sua lógica
}).trigger('change'); 

This way every time you click, you will go through your logic. You may need to check the event to treat when it is human interaction and not automatic drive.