如何使用jQuery通过<select> id和<option>值在<select>选项中找到文本？

Question

我已经做了一些搜索,但我对JavaScript和jQuery很新,似乎无法弄清楚如何去做(或者甚至可能).基本上,我有两个选择菜单和一个相关的值,每个选项与文本不同,但选择之间相同:

<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> 

我需要做的是根据SELECT ID和OPTION VALUE用选择的文本填充另一个div.例如,如果某人从day2Breakfast SELECT中选择了"Muffin",我会想要提醒("你为第2天选择了松饼").我知道我可以使用它来查找具有一些ID的div中的文本:

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

但这将返回"培根鸡蛋和CheeseMuffinBagel".我只需要检索与特定SELECT ID和OPTION VALUE相关联的文本.

非常感谢你!

Answer 1

你正在寻找元素.value(在vanilla JavaScript中),并且.val()在jQuery中.此外,要获取所选值的文本,只需option:selected在元素中请求all :

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