JS和Jquery获取选中select值和文本

最新推荐文章于 2024-07-28 02:30:34 发布

相思比梦长

最新推荐文章于 2024-07-28 02:30:34 发布

阅读量761

点赞数 1

分类专栏： WEB前端文章标签： JS Jquery 选中select 值文本

本文链接：https://blog.csdn.net/netuser1937/article/details/54943335

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS和Jquery获取选中select值和文本</title>
</head>

<body>
<form name="form1" id="form1" method="post" action="XX">
  <input name="gettext" id="gettext" value="" type="hidden" />
  <input name="getvalue" id="getvalue" value="" type="hidden" />
  <!--<select name="PaymentType" style="width:110px" οnchange="GettextAndValue(this)"> -->
  <select name="PaymentType" style="width:110px" οnchange="GettextAndValue2(this)">
    <option value="">请选择 </option>
    <option value="001">月付</option>
    <option value="002">半年付</option>
    <option value="003">年付</option>
  </select>
</form>
<p><a href="javascript:;" οnclick="subform();">DOM</a></p>
<p><a href="javascript:;" οnclick="subform2();">JQ</a></p>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script language="javascript">
//DOM原生获取select选中下拉框的的值和文本
function GettextAndValue(obj){
	var txt=obj.options[obj.options.selectedIndex].text;
	var val=obj.options[obj.options.selectedIndex].value;
	document.getElementById("gettext").value = txt;
	document.getElementById("getvalue").value = val;
}
//DOM原生表单提交
function subform(){
	alert(document.getElementById("gettext").value);
	alert(document.getElementById("getvalue").value);
	document.getElementById("form1").submit();	
}

//JQ获取select选中下拉框的的值和文本
function GettextAndValue2(obj){
	var txt=$(obj).find("option:selected").text();
	var val=$(obj).find("option:selected").val();
	$("#gettext").val(txt);
	$("#getvalue").val(val);
}
//JQ表单提交
function subform2(){
	alert($("#gettext").val());
	alert($("#getvalue").val());
	$("#form1").submit();	
}
</script>
</body>
</html>