在使用get(）检索select之后，使用jQuery确定所选选项

Determining selected option using jQuery after using get() to retrieve the select

本文关键字：jQuery 使用 选项 之后 get select 检索      更新时间：2023-09-26

我使用get（）检索页面上的第一个选择下拉菜单，如下所示：

styleSelect = jQuery('select').get(0);

我可以做正常的事情，比如

jQuery(styleSelect).remove();

要删除select，但我很难找到正确的语法来获取当前所选选项的文本。我试过：

jQuery(styleSelect, ':selected').text();

以及它的几个变体，我想我只是错过了一些愚蠢的东西。

jQuery('select').val()

应返回当前所选元素的值。

不过，这确实会返回值。很少返回文本。

你可以用下面这样的东西来做：

jQuery('#test').change(function() {
    //get text(), change to .val() to get value
    var value = jQuery(':selected', this).text();
    //insert value
    jQuery('h2 span').html(value); 
});

http://jsfiddle.net/pCsF9/

附带html

    <select name="test" id="test">
        <option value="AA">AA</option>
        <option value="MA">MA</option>
        <option value="LA">LA</option>
        <option value="GO">TEST</option>
    </select>
<h2>selected:<span></span> </h2>

注意将.text（）更改为.val（），然后选择最后一个选项以查看选择值和文本之间的区别。.text()应返回TEST，其中.val()将返回GO

这是旧的skool非jQuery版本，适用于所有可编写脚本的浏览器：

var option = styleSelect.options[styleSelect.selectedIndex];
alert("Value: " + option.value + ", text: " + option.text);

首先使用选择器，然后使用上下文：

jQuery(':selected',styleSelect).text();

matchew的建议也会起作用，但只有当您没有设置<option>的值属性时（如果您设置了值属性，您将获得所选选项的值，而不是文本）

var styleSelect = $('select option:selected');
console.log(styleSelect.val());

将为您提供当前所选选项的值

相关文章：