Trying to take hidden input value with hidden mySQL ID

When I choose an option in my dropdown, I want to take it’s MySQL table ID and put it in a hidden input box. The MySQL table rows are correct, but the input box never changes.

I’m using this to try to retrieve the value:

   $('.theNum').click(function() {
        $('#menu2').html($(this).text() + '<span class="caret"></span>')
      })
      $(function() {
        //Listen for a click on any of the dropdown items
        $(".theNum").click(function() {
          //Get the value
          var value = $(this).attr("value");
          //Put the retrieved value into the hidden input
          $("input[name='theNum']").val(value);
        });
      });

And this HTML code, with the hidden input box:

              <div class="form-group" >
                <select name="companies" class="form-control " id="companies"  >
                  <option value="" disabled selected id="menu2"> Selecione a empresa </option>
                  <?php
                  while ($row = $result->fetch_assoc()) : ?>
                    <option name = 'theNum' value="<?= $row['id']; ?>"> <?= $row['nome']; ?> </option>
                  <?php endwhile ?>

                </select>
              </div>

Thank you for your help!

Answer

You don’t listen for clicks on options. You should listen for change of the <select>, and get its value.

$("#companies").change(function() {
    $("input[name='theNum']").val($(this).val());
});