JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select type="text" class="form-control" name="value_code" id="optionSelect" value="form.value_code">
  <option value="none">옵션을 선택하세요.</option>
  <optgroup label="title-name">
    <li>
      <p id="optprice">value.extra_cost-1</p>
      <option id="value" value="value_code">value.name extra_cost 1-원</option>
     </li>
     <li>
      <p id="optprice">value.extra_cost-2</p>
      <option id="value" value="value_code">value.name extra_cost 2-원</option>
     </li>
  </optgroup>
</select>

<br>
RESULT : <label id="result">-</label>

JavaScript

$(document).ready(function() {
   $("#optionSelect").change(function(){      
      var label = $(this.options[this.selectedIndex]).prop('text');
      $('#result').text(label)
    	console.log(label);
    })
});