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

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

posted @ 2015-10-23 09:36  So`  阅读(1547)  评论(0)  编辑  收藏  举报