oKing

oShopZ 在线商城系统后台截图

有时候下拉框的选项不能满足需要时需要手工输入，这情况可以在旁边再放一个INPUT和文字说明，但是比较难理解，也不美观。
我的解决办法是选择最后一个选项(option)“手工输入>>”后，此下拉框(select)就会变成文本输入框(input)

实现思路很简单，选项(option)“手工输入>>”的值是就是下拉框(select)的id名
onchage的时候调用cinput函数当检查到this.value = this.id就隐藏select加入input，点击input旁边的“x”就还原。

调用示例：

<select onchange=“cinput(this)” id=”example”>
<option value=”1″>xxxxx</option>
<option value=”example”>手工输入>></option>
</select>

当有缺省值的情况下直接调用函数

cinput($(”#example”).get(0), “ooo”);

本文章所有代码是基于JQUERY，DEMO请点击这里。

// 全局变量，保存位置
var fn = {};
// item 是 select 对像
// val 是可选参数，有缺省值的时候用到
function cinput(item, val)
{
if(item.id != item.value && !val) {
// 保存原始位置
fn[item.id] = item.selectedIndex;
return;
}
// 先保存ID
var id = item.id.toString();
// 隐藏select
$("#"+id).hide();
// 获取父TAG对像用以加入input
var p = $("#"+id).parent();
// 避免冲突把select的id和name更名
$("#"+id).get(0).name = id + "_bak";
$("#"+id).get(0).id = id + "_bak";
// 追加input和取消按钮
var html = '<input size="5" id="'+id+'" name="'+id+'"/>';
html += '<input id="'+id +'_return" type="button" value="x" />';
p.append();
if(val) $("#"+id).val(val);
// 设置取消按钮onclick事件
$("#"+id+"_return").click(function(){
// 移除input
$("#"+id).remove();
$("#"+id+"_return").remove();
// 恢复Select
var t = $("#"+id+"_bak").get(0);
t.name = id;
t.id = id;
$(t).show();
// 恢复原来的位置
t.selectedIndex = fn[item.id];
});
}