通过jquery获取select标签的文本值和value值

最新推荐文章于 2022-12-25 12:16:16 发布

deduanguan6743

最新推荐文章于 2022-12-25 12:16:16 发布

阅读量180

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tony-Wang/p/4903493.html

版权

1.HTML代码

<body>
    <div class="container" style="margin-top:10px;">

        <div class="row" style="margin-bottom:20px;">
            <select id="selectlabel">
            <option value="11">---选择One---</option>
            <option value="12">---选择Two---</option>
            <option value="13">---选择Three---</option>
            <option value="14">---选择Four---</option>
            <option value="15">---选择Five---</option>
            </select>
        </div>

        <div class="row">
            <p>select标签选中的value为：<span id="selectVal"></span></p>
            <p>select标签选中的文本为：<span id="selectText"></span></p>
            <p>select标签选中的Value为：<span id="selectOtherValue"></span></p>
            <p>select标签的所有文本为：<span id="selectAllText"></span></p>
        </div>

    </div>
</body>

　　2.js代码

$("#selectlabel").change(function(){
		var selectValueStr = $.trim($("#selectlabel option:selected").val());
		var selectTextStr = $.trim($("#selectlabel option:selected").text());
		var selectOtherValueStr = $.trim($("#selectlabel").val());
		var selectAllTextStr = $.trim($("#selectlabel").text());
		$("#selectVal").text(selectValueStr);
		$("#selectText").text(selectTextStr);
        $("#selectOtherValue").text(selectOtherValueStr);
		$("#selectAllText").text(selectAllTextStr);
	})

　　备注：1.获取选中项的value有2种方法实现

2.如果有项目需求使用到select所有文本及value，选中项文本及value。可参考以下链接：

http://www.cnblogs.com/wang7/archive/2012/10/16/2726349.html

转载于:https://www.cnblogs.com/Tony-Wang/p/4903493.html

deduanguan6743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过jquery获取select标签的文本值和value值

1.HTML代码<body> <div class="container" style="margin-top:10px;"> <div class="row" style="margin-bottom:20px;"> <select id="selectlabel"> ...
复制链接

扫一扫