javascript - 我如何找到里面的文字由双方选择身份证和使用 jQuery 的价值？

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 天的 Muffin”）。我知道我可以使用它从具有某些 ID 的 div 中查找文本：

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

但这将返回“培根蛋和奶酪松饼百吉饼”。我只需要检索与特定 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 );
});

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

我稍微修改了你的html。见演示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'));    
});