I need to get the value from the selected item to the PHP function

I have a problem with some HTML, Javascript and PHP code. I tried a few things with some AJAX calls which did not work.

What I want to happen: When I change the selected option it needs to update the function with the value from the option, so the PHP function gets the “id” from the selected option. And this need to happen without any refresh on the page.

So I need to get the value from the selected item to the PHP function.

Code:

<label>Channels</label>
  <div class="input-group mb-3">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(function (){' '}
      {$('#login.component').change(function () {
        if ($(this).val() == 3) {
          $('#txtOther').removeAttr('disabled');
          $('#txtOther').focus();
        } else {
          $('#txtOther').attr('disabled', 'disabled');
        }
      })}
      );
    </script>
    <select class="form-select" id="login.component">
      <option selected>Choose..</option>
      <option value="0">Whatsapp</option>
      <option value="1">Telegram</option>
      <option value="2">Slack</option>
      <option value="3">Custom</option>
    </select>
  </div>
  <div className="form-group">
    <label>Channel Name</label>
    <input type="text" className="form-control" id="txtOther" placeholder="Enter Channel Name" disabled="disabled" />
  </div>