HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selected value and label</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    #out { margin-top: 12px; padding: 12px; background: #e0f2fe; border: 1px solid #0284c7; }
  </style>
</head>
<body>
  <select id="category">
    <option value="flowers">Flowers</option>
    <option value="trees">Trees</option>
    <option value="grass">Grass</option>
  </select>
  <div id="out"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#category").on("change", function() {
      var val = $(this).val();
      var label = $("#category option:selected").text();
      $("#out").text("Value: " + val + " | Label: " + label);
    }).trigger("change");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Read value and label from option:selected (Try It)