如何通過<select> id和<option>值使用jQuery找到<select>選項中的文本？

我已經做了一些搜索，但我對JavaScript和jQuery很陌生，似乎無法弄清楚如何去解決這個問題（或者甚至可能）。基本上，我有兩個選擇菜單，並與每個選擇相關的值是不一樣的文本，但選擇之間的相同：如何通過<select> id和<option>值使用jQuery找到<select>選項中的文本？

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

我需要做的就是填充另一個DIV與選擇的文本基於SELECT ID和OPTION VALUE。例如，如果某人從day2Breakfast SELECT中選擇了「Muffin」，我想要提醒（「您選擇了第2天的鬆餅」）。我明白，我可以與一些ID用它來查找的文本從一個div：

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

但是，這將返回「培根雞蛋和CheeseMuffinBagel」。我只需要檢索與特定的SELECT ID和OPTION VALUE相關的文本。

非常感謝！

來源

2013-01-12 Kavin2468

您正在尋找元素.value（在vanilla JavaScript中），並且在jQuery中是.val()。此外，爲了獲得所選擇的價值的文字，簡單地要求所有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); 
});

來源

2013-01-12 07:51:38 Sampson

可以做類似'$（「＃day1Breakfast」）找到（「選項：選擇」）。VAL（）; ' –

謝謝！這非常有幫助。我即將嘗試，但它是有道理的。 – Kavin2468

Aaaaand它就像一個魅力！再次感謝！ – Kavin2468

ü想是這樣的，

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

來源

2013-01-12 07:54:14

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

來源

2013-01-12 07:55:58 polin

我修改你的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'));  
});

來源

2013-01-12 08:01:11 phnkha

如何通過<select> id和<option>值使用jQuery找到<select>選項中的文本？

回答

相關問題