Trouble getting label from array instead of value

Question

So I am using an array to populate a dropdown menu and right now that part works great. I use the value to help calculate service cost and i use the label to display the option name to the user. My issue now is that my form is sending the value(which is just the price) and not the label. I may need it to do both potentially if my paypal button is my submit button? im not sure. Right now i just have the form sending to discord though. HTML for particular selection menu

   <fieldset>
      <label for="rank-tourn">
        Select Tournament Title
      </label>

      <select id="rank-tourn" name="Desired Tournament Rank" class="menus form-select" onchange="onChangeCurrent()">
        <option value="0" label="" >Select</option>
      </select>
      
    </fieldset> 

java for populating list

function buildOptList(select, id) {
  select.innerHTML = null;

  //alert("Populate list");
  for (var i = id; i < Rankings.length; i++) {
    if ((id == 0) && (i == Rankings.length)) {
        // do nothing
    } else {
        var el = document.createElement("option");
        el.textContent = Rankings[i].label;
        el.value = Rankings[i].value;
        select.appendChild(el);
      }
    }
  }

My array

var Rankings = [{
  "id": 1,
  "value": 10,
  "label": "Bronze Title",
}, {
  "id": 2,
  "value": 10,
  "label": "Silver Title",
}, {
  "id": 3,
  "value": 15,
  "label": "Gold Title",
}, {
  "id": 4,
  "value": 20,
  "label": "Platinum Title",
}, {
  "id": 5,
  "value": 25,
  "label": "Diamond Title",
}, {
  "id": 6,
  "value": 30,
  "label": "Champion Title",
}, {
  "id": 7,
  "value": 40,
  "label": "Grand Champion Title",
}, {
  "id": 8,
  "value": 80,
  "label": "Supersonic Legend Title",
}];

I have also tried using jquery to try and copy the selection label to a hidden field but im having trouble with that too.

This was my attempted jquery: HTML

      <input type='hidden' id='hidden' value='0' label=''/>

JQUERY

$("#rank-tourn").change(function () {
    $("#hidden").text($(this).text());
    alert($(this).text())
})

currently this alerts on change everysingle label together. I have tried adding the :selected to rank-tourn and then it fails to alert.

https://jsfiddle.net/Popo74123/q92jh1p0/465/ this is my code if its easier.

Answer 1

this.text() will get the value of everything, you need to find the pseudo selector :selected to display the one that was chosen

$("#rank-tourn").change(function () {
    $("#hidden").text($(this).find(':selected').text());
    alert($(this).find(':selected').text())
})