zoukankan      html  css  js  c++  java
  • jQuery的combobox绑定失去焦点blur事件

       因为客户的需求,要求select选择列表框能输入文字,网上找了资料,只有jQuery的easyUI (http://www.jeasyui.com/)比较好不错,但在使用的过程中才发现,很多坑!!

       先说说怎么绑定失去焦点事件这个坑,combobox已经解除了的方法,对于blur方法已经默认解绑了,因此要自己来绑定。网上搜索了一下,比较靠谱的是:http://jsfiddle.net/ucqvrcn1/  ,本人的就是基于这个实例来做的。本人的combobox是根据代码动态生成的,id也是动态给的(标识不同产品的参数,比如说这是颜色的id为1,其中用银色、镀金,长度为id为2,有1700mm、2500mm、3000mm,长度可以手工输入数值,但要判断长度是否在600mm-4000mm之间),而且是一组combobox,因此要绑定blur事件,是一组combobox都要绑定。

    <!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="100%;max-400px;padding:30px 60px;">
    		<div style="margin-bottom:20px">
    			<select id="state" class="easyui-combobox parameter_combobox"  name="state" label="State:" labelPosition="top" style="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="100%;max-400px;padding:30px 60px;">
    		<div style="margin-bottom:20px">
    			<select id="state2" class="easyui-combobox parameter_combobox" name="state" label="State:" labelPosition="top" style="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>

     

  • 相关阅读:
    php : Warning: strftime(): It is not safe to rely on the system's timezone settings.
    php : DOM 操作 XML
    php : 基础(3)
    php : 基础(2)
    阿里云物联网平台体验(NetGadgeteer+C#篇)
    阿里云物联网平台体验(树莓派+Nodejs篇)
    阿里云物联网平台体验(树莓派+Python篇)
    【MVP时间】5节课助你破解物联网硬件接入难点
    破解物联网落地困境-阿里云硬件接入最佳实践
    从端到云——工业物联网项目全栈快速开发实践
  • 原文地址:https://www.cnblogs.com/doinone/p/5898055.html
Copyright © 2011-2022 走看看