如何通过<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>选项中的文本？

回答

相关问题