JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="POST">
 
  <p>
    <label for="leden">Leden</label>
    <select id="leden" name="leden">
      <option value="">Selecteer een lid</option>
      <!-- hier dus je foreach, nu even als voorbeeld 2 users -->
      <option attr-bgrang="bgrang waarde user 1">User 1</option>
      <option attr-bgrang="bgrang waarde user 2">User 2</option>
    </select>
  </p>

  <p>
    <label for="bgrang">BGRang</label>
    <input type="text" id="bgrang" name="bgrang">
  </p>

  <p>
    <input type="submit">
  </p>

</form>

CSS

*{font-family:verdana,sans-serif;}
body{background:#fff;}

JavaScript

$(document).ready(function(){
  $('#leden').on('change', function() { // wanneer #leden verandert
    var bgrang_val = $('option:selected', this).attr('attr-bgrang'); // waarde van attr-bgrang ophalen
    $('#bgrang').val( bgrang_val ); // waarde in de input #bgrang zetten
  });
});