JSFiddle - React, Tailwind, and code Playground

by rogeralbi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<form id="formulario"> <!-- não esqueça do id do formulário tem que ser o mesmo da propriedade form -->
    <select data-changesubmit="true" form="formulario"> <!-- a magia está aqui-->
      <option value="1">Opção1</option>
      <option value="2">Opção2</option>
      <option value="3">Opção3</option>
      <option value="4">Opção4</option>
      <option value="5">Opção5</option>
      <option value="6">Opção6</option>
      <option value="7">Opção7</option>
      <option value="8">Opção8</option>
      <option value="9">Opção9</option>
      <option value="10">Opção10</option>
    </select>
    <button type="submit">Enviar</button>
</form>

JavaScript

// se eu setar aqui $ com algum outro valor
var $ = null;

(function ($) {   // o que eu falei de criar um escopo
       console.log('aqui é a função jquery');
       console.log($);
      
      // aqui é a função que pega uma input e um form
      // e transforma o input num submit quando disparar o evento change
      function changeSubmit($input, $form) {
          $input.on('change', function () {
              $form.submit(); // a magia está aqui tbm
          });
      };
      
      // aqui, ele pega todos os caras que tiver com data-changesubmit=true
      // e pega o atributo form, pra saber qual form ele via enviar
      // e usa a função changesubmit pra fazer a mágica
      $('[data-changesubmit=true]').each(function () {
          var $form = $( '#'+$(this).attr('form') ); // fique tranquilo kkk
          changeSubmit($(this), $form);
      })



})(jQuery);

console.log('aqui ele é null');
console.log($);