因為客戶的需求,要求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="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>
