使用Jquery设置select选中项的文本

wyumening 2013-04-12 10:10:50

使用的是jquery1.4.1 html代码如下：

<body>

    <form id="form1" runat="server">

    <div>

        <select id="selectbox">

            <option value="1">第一项</option>

            <option value="2">第二项</option>

        </select>

        <input type="hidden" id="hidselect" runat="server" />

    </div>

    </form>

</body>

我先试着使用选择器

              $("#selectbox option[text='第二项']").attr("selected", true); //发现无效！

之后我就改用filter方法：

                $("#selectbox option").filter("[text='第二项']").attr("selected", true);//有效！

功能都实现了，我不明白的是为什么我一开始用jquery选择器不起作用？然后我试了下这样写：

               $("#selectbox option[value='2']").attr("selected", true);//有效

为什么我根据value属性来筛选就能起作用，用text属性来筛选就不行？

...全文

1291 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

wyumening 2013-04-16

打赏
举报

网上有很多例子都是这么写的： $("#select_id option[text='jquery']").attr("selected", true); 可是这样做是无效的，这个链接给出了正确的作法：http://stackoverflow.com/questions/3744289/jquery-how-to-select-an-option-by-its-text

未知数 2013-04-12

打赏
举报

引用 2 楼 wyumening 的回复:

引用 1 楼 wzs_xyz 的回复:很明显的东西你没发现？ value是option的属性，而text不是，所以对text用属性选择器是无效的，除非你写成 <option value="1" text="第一项">第一项</option> 那为什么我试着这样写： JavaScript code?1$("#selectbox option").filter……

这是jquery的函数，你看jquery选择器和filter函数的源代码就知道了

吉普赛的歌社区高级成员 T9 2013-04-12

打赏
举报

引用 7 楼 wyumening 的回复:

引用 6 楼 yenange 的回复:option没有text的dom属性，　只是有js的text属性。 ==> option没有text的dom属性，　只是有text的js属性。你的意思是说属性和特性吧？

没事就结贴吧

wyumening 2013-04-12

打赏
举报

引用 6 楼 yenange 的回复:

option没有text的dom属性，　只是有js的text属性。 ==> option没有text的dom属性，　只是有text的js属性。

你的意思是说属性和特性吧？

吉普赛的歌社区高级成员 T9 2013-04-12

打赏
举报

option没有text的dom属性，　只是有js的text属性。 ==> option没有text的dom属性，　只是有text的js属性。

吉普赛的歌社区高级成员 T9 2013-04-12

打赏
举报

引用 4 楼 wyumening 的回复:

引用 3 楼 yenange 的回复:别纠结了，　兄弟。 text并不是一个实在的属性，　你见到option的标签中有 text = "???" 了吗？再看看我下面的测试，　用jQuery1.7.2，　用text是绝对会出错的。　但value一直有效。所以，　不必在一个不清晰不稳定的东西上多花时间了。 JavaScript code ? ……

其实，　这就涉及到js属性与dom属性的区别了。 option没有text的dom属性，　只是有js的text属性。设计了一个根据text来做的方法：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $option = $("#selectbox option[text='第二项']");
                alert($option.length > 0 ? "有对象" : "无对象");
                $option.attr("selected", true); //发现无效！
            });

            $("#btn2").click(function () {
                var $option = $("#selectbox option").filter("[text='第二项']");
                alert($option.length>0?"有对象":"无对象");
                $option.attr("selected", true);//1.7.2发现无效！1.4.1有效
            });

            $("#btn3").click(function () {
                var $option = $("#selectbox option[value='2']");
                alert($option.length > 0 ? "有对象" : "无对象");
                $option.attr("selected", true);//发现无效！
            });

            //正确写法
            $("#btn4").click(function () {
                var $option =$("#selectbox option:contains('第二项')").map(function(){ 
                    if ($(this).text() == "第二项") {
                        return this;
                    }
                });
                alert($option.length > 0 ? "有对象" : "无对象");
                $option.attr("selected", true);
            });
        });
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <select id="selectbox">
            <option value="1">第一项</option>
            <option value="2">第二项</option>
            <option value="21">第二项1</option>
        </select>
        <input type="button" id="btn" value="里面测试" />
        <input type="button" id="btn2" value="filter测试" />
        <input type="button" id="btn3" value="value测试" />
        <input type="button" id="btn4" value="contains测试" />
    </div>
    </form>
</body>
</html>

wyumening 2013-04-12

打赏
举报

引用 3 楼 yenange 的回复:

别纠结了，　兄弟。　
text并不是一个实在的属性，　你见到option的标签中有 text = "???" 了吗？

再看看我下面的测试，　用jQuery1.7.2，　用text是绝对会出错的。　但value一直有效。

所以，　不必在一个不清晰不稳定的东西上多花时间了。

JavaScript code
?

123456789101112131415161……

我试着调试了下对$("#selectbox option").get(1)这个对象添加监视，发现它指定了text属性

吉普赛的歌社区高级成员 T9 2013-04-12

打赏
举报

别纠结了，　兄弟。　 text并不是一个实在的属性，　你见到option的标签中有 text = "???" 了吗？再看看我下面的测试，　用jQuery1.7.2，　用text是绝对会出错的。　但value一直有效。所以，　不必在一个不清晰不稳定的东西上多花时间了。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var $option = $("#selectbox option[text='第二项']");
                alert($option.length > 0 ? "有对象" : "无对象");
                $option.attr("selected", true); //发现无效！
            });

            $("#btn2").click(function () {
                var $option = $("#selectbox option").filter("[text='第二项']");
                alert($option.length>0?"有对象":"无对象");
                $option.attr("selected", true);//1.7.2发现无效！1.4.1有效
            });

            $("#btn3").click(function () {
                var $option = $("#selectbox option[value='2']");
                alert($option.length > 0 ? "有对象" : "无对象");
                $option.attr("selected", true);//发现无效！
            });
        });
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <select id="selectbox">
            <option value="1">第一项</option>
            <option value="2">第二项</option>
        </select>
        <input type="button" id="btn" value="里面测试" />
        <input type="button" id="btn2" value="filter测试" />
        <input type="button" id="btn3" value="value测试" />
    </div>
    </form>
</body>
</html>

wyumening 2013-04-12

打赏
举报

引用 1 楼 wzs_xyz 的回复:

很明显的东西你没发现？ value是option的属性，而text不是，所以对text用属性选择器是无效的，除非你写成 <option value="1" text="第一项">第一项</option>

那为什么我试着这样写：

$("#selectbox option").filter("[text='第二项']").attr("selected", true);

这样写却可以？filter方法不是也是选择匹配指定选择器的元素吗？

未知数 2013-04-12

打赏
举报

很明显的东西你没发现？ value是option的属性，而text不是，所以对text用属性选择器是无效的，除非你写成 <option value="1" text="第一项">第一项</option>

取得select选择的文本与值的情形在很多地方都有用到，且实现的方法有很多，在下面的示例中将为大家详细介绍下jquery是如何做到的

今天小编就为大家分享一篇jquery获取select选中值的文本,并赋值给另一个输入框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。主要参数介绍： serviceUrl：Ajax 请求的 URL； lookup：本地数据数组； minChars：触发自动提示的最小字符数； params：请求的附加参数； formatResult：返回结果的格式化函数； autoSelectFirst：是否自动选中第一个； onSearchStart：搜索开始的回调函数； onSearchComplete：搜索完成的回调函数； tabDisabled：是否禁用 Tab 键；

获取select ：获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; 设置select: 设置select 选中的索引： $("#ddlregtype ").get(0).selectedindex=index;//index为索引值设置select 选中的value： $("#ddlre

本篇文章主要介绍了jQuery实现select下拉框获取当前选中文本、值、索引以及添加/删除Select的Option项的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章