给下拉框追加OnBlur事件

最新推荐文章于 2022-03-19 23:41:36 发布

最新推荐文章于 2022-03-19 23:41:36 发布 · 2.5k 阅读

文章标签：

#JavaScript #下拉框 #追加事件 #onblur #ViewUI

本文详细介绍了如何使用JavaScript为HTML下拉框添加OnBlur事件，以便在用户离开下拉框时获取所选值并更新显示。

<html>
  <head>
    <title>给下拉框追加OnBlur事件</title>
  </head>
  
<body>
  <select id="oSecId">
    <option></option>
    <option value="0">视频会议</option>
    <option value="1">非视频会议</option>
  </select>
  <span>通过追加事件输出下拉框的值为：</span><span id="secValueId"></span>
</body>

<script language="javascript">
window.onload = function(){ 
	var oMeetingType =  document.getElementById("oSecId"); 
	if (oMeetingType.addEventListener){	// firefox  , w3c 
		oMeetingType.addEventListener("blur", meetingTypeBlur, false);
	} else {	// ie 
		oMeetingType.attachEvent("onblur", meetingTypeBlur);
	} 
}

function meetingTypeBlur() {
	var oMeetingType =  document.getElementById("oSecId"); 
	var secText = oMeetingType.options[oMeetingType.selectedIndex].text;
	var oSecValue =  document.getElementById("secValueId");
	oSecValue.innerHTML = secText;
}
</script>
</html>