下拉可编辑控件

控件：
<select id="txt地段" name="txt地段" style="width: 100%; height: 100%; line-height: 28px; position: absolute; left: 0px; top: 0px" class="editable">
<option value="/" selected="selected">/</option>
</select>

JS：

//select对象可编辑
$(function () {
$("#usual1 ul").idTabs();
//只需修改此处即可
var className = "editable";
var array = [];
var selects = $("select[class='editable']");//each by name
//找到符合条件的select 和 text 对
for (var i = 0; i < selects.length; i++) {
if (selects[i].getAttribute("class") == className) {
//找到对应的text文本框
var text = selects[i].parentNode.lastElementChild;
var sel = selects[i];
var arr = [];
arr[0] = sel;
arr[1] = text;
array.push(arr);
}
}

for (var i = 0; i < array.length; i++) {
//遍历符合条件的select 和 text 并添加事件响应函数
var sel = array[i][0];
var text = array[i][1];
sel.textObj = array[i][1];
text.selObj = array[i][0];

sel.onchange = function () {
this.textObj.value = this.options[this.selectedIndex].text;
}
text.onchange = function () {
//去除text框开头结尾的空格
this.value = this.value.replace(/^\s*/g, "");
this.value = this.value.replace(/\s*$/g, "");
//如果text文本框内容发生改变 且select内部没有此text的选项 则加入到select的option选项中
for (var j = 0; j < this.selObj.options.length; j++) {
if (this.selObj.options[j].text == this.value) {
return;
}
}
var opt = new Option();
opt.value = this.value;
opt.text = this.value;
this.selObj.options.add(opt);
}
}

});

转载于:https://www.cnblogs.com/dinniszhang/p/5465535.html