如何通过JQUERY获得下拉框的显示值

例如下面的下拉框,我如何知道选中的是男还是女(注意:不是1 2)
<select id="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>

通过获取元素的text实现功能。关键的两个jquery函数为:

$("select").val();  // 选中项目的value值。

$("select option:checked").text(); // 选中项目的显示值。

实例演示如下:

1、设计简单的一个下拉框代码,包括【男】【女】两个值。代码如下:

此时页面展示效果如下:

2、设计一个函数,通过点击按钮,将当前选中的下拉框的值和显示的文字,都选取出来,并分别赋值给两个input,函数代码如下:

此时,选取男,然后点击,展示效果如下:

如果选择女,展示效果如下:

扩展资料:

带有预先选定的选项的下拉列表:HTML <option> 标签的 selected 属性。

定义和用法:

selected 属性规定在页面加载时预先选定该选项。被预选的选项会显示在下拉列表最前面的位置,也可以在页面加载后通过 JavaScript 设置 selected 属性。

实例:

<select>

<option>Volvo</option>

<option selected="selected">Saab</option>

<option>Mercedes</option>

<option>Audi</option>

</select>

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2017-09-20

参考如下代码

$("select").val();  // 选中项目的value值
$("select option:checked").text(); // 选中项目的显示值

示例如下:

    创建Html元素

    请选择:
    <select id="sel">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    </select>
    <input type="button" value="点击查看被选项目">

    编写jquery代码

    $(function(){
    $("input").click(function() {
    a = $("#sel").val();
    b = $("#sel option:checked").text();
    alert("被选项目的值:"+a+",被选项目的显示值:"+b+"。");
    });
    })

    显示效果

第2个回答  2011-12-30
很简单
1。先给select控件添加一个onchange="change()"
2。
function change()
{
alert($("#sex").text);
}
这样就可以了
第3个回答  2011-12-28
alert($("#sex option:selected").val());
第4个回答  推荐于2017-09-27
function getSelect(){
var value=$F('sex');
alert(value);
}
<select id="sex" onchange="getSelect()">
<option value="1">男</option>
<option value="2">女</option>
</select>
希望可以帮助到你。追问

$F('sex');
好像有问题 提示: $F is not defined

追答

不会吧。我都试验了。这个$F('')就是document.getElementById("")的缩写啊。你确定没有漏掉的?

本回答被提问者采纳
相似回答