JQuery 检索文本而不是选择列表的值

JQuery retrieving text instead of value of select list

本文关键字：选择 列表 检索 文本 JQuery      更新时间：2023-09-26

我需要从选择列表中获取值，但 JQuery 在选择选项中返回文本。

我有以下简单的代码。

<select id="myselect">
   <option selected="selected">All</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>
然后，我

使用以下 JQuery，我认为它会为我提供值

var myOption = $('#myselect').val()

但是当我看myOption时，我得到的是"一"或"二"的文本？

更新：添加 val（）。

console.log($('#myselect').val());
// all option's value
$('#myselect').find('option').each(function(){
    console.log($(this).text());
    console.log($(this).val());
});
// change event
$('#myselect').change(function(){
    console.log($(this).find(':selected').text());
    console.log($(this).find(':selected').val());
});

演示 ： http://jsfiddle.net/yLj4k/3/

我遇到了这个问题，因为jQuery Val()函数在我的脑海中，我实际上将选项定义为<option val='xx'>而不是<option value='xx'>。这就是导致问题的原因。请参阅此更新的 jsfiddle。

<select id="myselect">
   <option value="1">One</option>
   <option value="2">Two</option>
</select>
<select id="myselect2">
   <option val="1">One</option>
   <option val="2">Two</option>
</select>
<script>
$('select').change(function() {
    alert($(this).val());
});
</script>

第一个select将提醒"1"或"2"，第二个select将警报"一"或"二"。

获取文本值的最简单方法是

对于选定的选项文本：

$("#myselect option:selected").text();

对于选定的选项值：

$("select#myselect").val();

演示

$("#myselect").change(function() {
    alert(this.options[this.selectedIndex].value);
});

编辑

希亚

在这里工作演示：在这里使用文本 http://jsfiddle.net/QtjTq/3/&&使用val http://jsfiddle.net/QtjTq/4/

像这样访问 text（） - var myOption = $('#myselect option:selected').text()获取价值 - var myOption = $('#myselect option:selected').val()

详细阐述：

对于值，如果要访问value=属性，请使用.val() ;

对于文本，如果要获取文本，即one or two则使用选定的选项... option:selected .text() API。

如果您想阅读 http://forum.jquery.com/topic/jquery-using-val-vs-text，请进一步

希望这对:)有所帮助干杯

var myOption = $('#myselect option:selected').text() //**or whatever suit you** 
var myOption = $('#myselect option:selected').val()

<select id="myselect">
   <option value="1">One</option>
   <option value="2">Two</option>
</select>
相关文章：