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.

If the rankings are stored server side you should only need to send the id and look up what you need using that. Appears you are over complicating things here — charlietfl

Unbranded Manchester Unbranded Manchester · Accepted Answer · 2021-05-08T12:12:18

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())
})

Trouble getting label from array instead of value

2 Answers