How to pass the value of 2 Select Option by Javascript

Question

I have that function:

<script type="text/javascript">
   $(document).ready(function () {
     $('#auto').change(function () {
       $('#funcao').load('listaQuestaoAutomatica.php?auto=' + $('#auto').val());
     }).change();
   });
</script>

It passes the value of Select Option when selecting to another file by parameter, on that line: $('#funcao').load('listaQuestaoAutomatica.php?auto=' + $('#auto').val());

How do I pass also in this function the value of a 2nd Select Option when choosing which is in the same file?

first select option:

<select name="auto" id="auto">
  <option value="">S/N</option>
  <option value="S">Sim</option>
  <option value="N">Não</option>
</select>

2nd select option:

<select name="conta" id="conta">
  <option value="">Selecione</option>
  <option value="+">Somar</option>
  <option value="*">Multiplica</option>
</select>

What I wish is this, I select the first select option, and only when selecting the 2nd select option it send by parameter to the given link.

Answer 1

You can declare two variables, a variable containing the value of auto and another variable containing the value of conta, with these two variables only include as a parameter of your URL.

I used the string template to concatenate the data.

const auto = $('#auto').val();
const conta= $('#conta').val();

$('#funcao').load(`listaQuestaoAutomatica.php?auto=${auto}&conta=${conta}`);

References:

• Template String
• Load - Jquery

Example of use as described in the question

// Executa ao selecionar o segundo select id=conta
$('#conta').change(function () {
    const auto = $('#auto').val();
    const conta= $('#conta').val();

    $('#funcao').load(`listaQuestaoAutomatica.php?auto=${auto}&conta=${conta}`);
});