1. 程式人生 > >JS獲取select選中的value和內容

JS獲取select選中的value和內容

 不說廢話,直接上程式碼

<!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獲取select選中的value和內容</title>
<style>
	p a{
		display:inline-block;
		text-decoration: none;
		background: #666;
		padding: 6px 10px;
		color: #FFFFFF;
		border-radius: 4px;
		font-size: 12px;
	}
</style>
</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" onchange="GettextAndValue(this)">
    <option value="">請選擇 </option>
    <option value="val01">1</option>
    <option value="val02">2</option>
    <option value="val03">3</option>
  </select>
</form>
<p>觸發:<a href="javascript:;" onclick="subform();">點選</a></p>
<script language="javascript">
//js原生獲取select選中下拉框的的值和文字
function GettextAndValue(obj){
	var txt=obj.options[obj.options.selectedIndex].text;
	var val=obj.options[obj.options.selectedIndex].value;
	console.log(txt)
	console.log(val)
	document.getElementById("gettext").value = txt;
	document.getElementById("getvalue").value = val;
}
//點選觸發展示獲得結果
function subform(){
	alert(document.getElementById("gettext").value);
	alert(document.getElementById("getvalue").value);
}

</script>
</body>
</html>