Как вывести значение

$("#Cars").change(function () {
          var str = "";
          $("#Cars option:selected").each(function () {
                str += $(this).text() + "\n";
              });
          $("#cars_selected").text(str);
        })
        .trigger('change');

<td rowspan="1"
style="width:80%">

 <form name="CarSelect" class="wrapper">


 <select size="1"  Id="Cars">
    <option disabled>Выберите машину</option>
     <optgroup label="Bmw">
    <option select value="Car1">Bmw M5 </option>

    <optgroup label="Toyota">
    <option select value="Car2">Toyota</option>

    <optgroup label="Mercedes">
    <option select value="Car3">Mercedes Benz Amg Gt</option>


   </select>

<h3> Вы выбрали:  <span id="cars_selected"></span></h3>
    </form>
</td>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

const select = document.querySelector('select');
const text = document.querySelector('h3 span');

select.addEventListener('change', function() {
  const option = this.options[this.selectedIndex];
  text.innerHTML = option.text;
  // text.innerHTML = option.value - значение (value)
});

// Нужно только для предварительного показа
const forceChange = new Event('change');
select.dispatchEvent(forceChange);

<form>
    <select size="1">
      <option disabled>Выберите машину</option>
      <optgroup label="Bmw">
        <option select value="Car1">Bmw M5 </option>
      <optgroup label="Toyota">
        <option select value="Car2">Toyota</option>
      <optgroup label="Mercedes">
        <option select value="Car3">Mercedes Benz Amg Gt</option>
    </select>
   
    <h3>Вы выбрали: <span></span></h3>
</form>