jQuery的combobox綁定失去焦點blur事件

時間 2019-11-13

標籤 jquery combobox 綁定失去焦點 blur 事件欄目 JQuery 简体版

原文原文鏈接

由於客戶的需求，要求select選擇列表框能輸入文字，網上找了資料，只有jQuery的easyUI （http://www.jeasyui.com/）比較好不錯，但在使用的過程當中才發現，不少坑！！javascript

先說說怎麼綁定失去焦點事件這個坑，combobox已經解除了的方法，對於blur方法已經默認解綁了，所以要本身來綁定。網上搜索了一下，比較靠譜的是：http://jsfiddle.net/ucqvrcn1/ ，本人的就是基於這個實例來作的。本人的combobox是根據代碼動態生成的，id也是動態給的（標識不一樣產品的參數，好比說這是顏色的id爲1，其中用銀色、鍍金，長度爲id爲2，有1700mm、2500mm、3000mm，長度能夠手工輸入數值，但要判斷長度是否在600mm-4000mm之間），並且是一組combobox，所以要綁定blur事件，是一組combobox都要綁定。css

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic ComboBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="./easyui.css">
	<script type="text/javascript" src="./jquery.min.js"></script>
	<script type="text/javascript" src="./jquery.easyui.min.js"></script>
</head>
<body>

	<h2>ComboBox</h2>
	<p>Click the buttons below to perform actions.</p>

	
	<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			<select id="state" class="easyui-combobox parameter_combobox"  name="state" label="State:" labelPosition="top" style="width:100%;"  data-options="editable:true,panelHeight:'auto'"  >
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
			</select>
		</div>
	</div>
	<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
		<div style="margin-bottom:20px">
			<select id="state2" class="easyui-combobox parameter_combobox" name="state" label="State:" labelPosition="top" style="width:100%;"  data-options="editable:true,panelHeight:'auto'"  >
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
			</select>
		</div>
	</div>

	</div>
	
</body>

<script type="text/javascript">

		 $(function(){
			<!-- 綁定失去焦點事件 -->
			var tb = $('.parameter_combobox');
			$.each(tb, function(n, value){
			  
			  console.log('n=' + n + " value=" + value);
			  console.log(value);
			  $(value).combobox('textbox').bind('blur', function(e){
				  console.log('失去焦點!');
				  console.log(e);
				  console.log('getValue=' + $(value).combobox('getValue'));
				  console.log('getText=' + $(value).combobox('getText'));
　　　　　　　　　　　　　　　　　　　　 var this_id = $(value).attr("id");                  　　　　　　　　　 console.log("value.this_id=" + this_id);
				});
			});
			console.log(tb);
		 });
		
		 
</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。