How would I find the text inside a <select> option by both the <select> id and <option> value using jQuery?

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

Answer 2

你想要这样的东西

$("#day1Breakfast option[value='bec']").text();

Answer 3

    <script type="text/javascript">
function fnc(myid,myvalue)
{
    alert("you've chosen "+myvalue+" from "+myid);
}
</script>

<select id="day1Breakfast" onChange="fnc(this.id,this.value)">
<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" onChange="fnc(this.id,this.value)">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select> 

Answer 4

I modified your html a little. See demo http://jsfiddle.net/j6HU6/8/

HTML:

<select class="menu" name="day 1">
<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 class="menu" name="day 2">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select> 

JS:

$('.menu').change(function(){
  alert('You chose ' + $(this).children('option:selected').text() + ' for ' + $(this).attr('name'));    
});