Question

I have done some searching but I am very new to JavaScript and jQuery and can’t seem to figure out how to go about this (or if it is even possible). Basically, I have two select menus and an associated value with each choice that is NOT the same as the text but the same between selects:

<select id="day1Breakfast">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>

<select id="day2Breakfast">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select> 

What I need to do is populate another div with the text of the choice based on the SELECT ID and OPTION VALUE. For instance, if someone selected “Muffin” from the day2Breakfast SELECT, I would want to alert(“You chose Muffin for Day 2”). I understand that I can use this to find the text from a div with some ID:

document.getElementById("day1Breakfast").text()

But that will return “Bacon Egg and CheeseMuffinBagel”. I need only retrieve the text associated with the specific SELECT ID and OPTION VALUE.

Thank you very much!

Answer 1

You’re looking for the elements .value (in vanilla JavaScript), and is .val() in jQuery. Further, to get the text of the selected value, simply request all option:selected within the element:

// Event delegation on all select elements
$("select").on("change", function (e) {
  // When a select changes, find the selection option
  // Also, get the ID of the select element that changed
  var selected = $(this).find("option:selected"),
      fromElem = $(this).prop("id");
  // Output the new selected text, value, and ID of affected select
  console.log( selected.text(), selected.val(), fromElem );
});