我如何在其中找到文字 <select>兩者都選擇<select> id和<option>使用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”，我將發出警報（“您為Day 2選擇了Muffin”）。 我知道我可以使用它從具有某些ID的div中查找文本：

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

但這將返回“培根雞蛋和奶酪松餅百吉餅”。 我只需要檢索與特定的SELECT ID和OPTION VALUE相關的文本。

非常感謝你！

Answer 1

您正在尋找元素.value （在普通JavaScript中），並且在jQuery中是.val() 。 此外，要獲取選定值的文本，只需在元素內請求all option:selected ：

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