<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI-NEW1</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<div>
<button οnclick="tijiao()">提交</button>
</div>
<div border="1">
<div border="1">
<table id="inTable" class="layouttable" border="1">
<tr >
<td class="layouttable_td_label" >---</td>
<td >
<div style="height:30px"><input type="text" name="makeupCo" id="makeupCo" style="width: 250px;" onFocus="setfocus(this)" οninput="setinput(this);" placeholder="请选择或输入"/><br/><select name="makeupCoSe" multiple="false" size="10" id="typenum" οnchange="changeF(this)" style="display:none; width:250px;position:relative;">
<option value="11">中国</option>
<option value="22">法国</option>
<option value="33">德国</option>
<option value="44">英国</option>
<option value="55">中国的台湾</option>
<option value="66">中国的钓鱼岛</option>
<option value="77">俄罗斯</option>
<option value="88">韩国</option>
</select></div>
</td>
<td ><input type="text" name="name" value="zhongguo ren "/></td>
</tr>
<tr >
<td >---</td>
<td><input type="text" name="name" value="zhongguo ren "/></td>
<td ><select><option value="11">中国</option><option value="22">法国</option></select></td>
</tr>
</table>
</div>
</div>
<script>
function tijiao(){
var value = $("#typenum").val();
//提交之前,如果input框里面有数据,则需要获取相对应第一个的value
var makeupCoValue = $("#makeupCo").val();
if(makeupCoValue!=null && makeupCoValue!='' && (value==null || value=='')){
for(i=0;i<TempArr.length;i++){
if(TempArr[i].indexOf(makeupCoValue)>-1){//表示从大于-1下表位置开始匹配
value = array[i];
$("#makeupCo").val(TempArr[i]);
break;
}
}
}
location.href="tijiao?makeupCoSe="+value;
}
var TempArr=[];//存储option
var array = [];//存储code
$(function(){
$("#makeupCo").val($("#typenum").find("option:selected").text());
//先将数据存入数组
$("#typenum option").each(function(index, el) {
TempArr[index] = $(this).text();
array[index] = $(this).val();
});
$(document).bind('click', function(e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
return;
}
elem = elem.parentNode;
}
$('#typenum').css('display', 'none'); //点击的不是div或其子元素
});
})
function changeF(this_) {
$(this_).prev().children("input").val($(this_).find("option").text());
$("#typenum").css({"display":"none"});
//给input设置值
$("#makeupCo").val($("#typenum").find("option:selected").text());
}
function setfocus(this_){//聚焦
$("#typenum").css({"display":""});
var select = $("#typenum");
select.empty();
setinput(this_);
if(!select){
for(i=0;i<TempArr.length;i++){
var option = $("<option></option>").text(TempArr[i]);
option.val(array[i]);
select.append(option);
}
}
//$("#typenum").attr('multiple','true');
}
function setinput(this_){//输入事件
var select = $("#typenum");
select.html("");
for(i=0;i<TempArr.length;i++){
if(TempArr[i].indexOf(this_.value)>-1){//表示从大于-1下表位置开始匹配
var option = $("<option></option>").text(TempArr[i]);
option.val(array[i]);
select.append(option);
}
}
}
</script>
</body>
</html>