首页 > Web开发 > 详细

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

时间:2015-10-23 10:13:45      阅读:190      评论:0      收藏:0      [点我收藏+]

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!