bootstrap combobox clone

bootstrap combobox clone issue

bootstrap combobox在使用过程中项目需求实现过程中遇见的问题，百度无果（反正我是通过百度没有找到相关的问题），然后转向google查看外文网站，发现在stackoverflow 有人提过同样的需求和问题，但是没有看到明确的解决方案，所以只能自己解决了.

要实现的需求如截图：

可以新增输入（下拉选项中没有的）；

clone多个combobox，事件正常；

实现form提交到后台。



jsp:

<table>
<tr id="value">
<td style="width: auto" id="name_title">Name</td>
<td style="width: 300px"  id ="name_area">
<select class="combobox form-control" name="name" id="name"  >
<option value="" selected="selected">Select a Name</option>
<option value="PHP">PHP</option>
<option value="MySQL">MySQL</option>
<option value="SQL">SQL</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
</td>
</tr>
</table>

Issue

1.在form表单的table中clone一个combobox，点击新clone的combobox，触发的却是上一个combobox的事件；

参考了stackoverflow 上提到的思路，结合实际解决：

在javascript中，先remove掉clone的combobox相关组件，在remove之前将其保存在一个变量中；

然后remove之后将该变量追加在指定的位置；之后会发现追加的同一位置，clone的控件有重复现象，并且一个是无法正常使用的，然后F12查看一下网页元素，会发现会多处一个combobox-container，删除之后就正常了。

js代码：

<script type="text/javascript">
....
var value_clone = $(#value).clone();//这里要设置为false,或者默认(false)
var newview = value_clone.find("#name_area").clone(true);
value_clone.find("#name_area").remove();
value_clone.find("#name_title").after(newview);
value_clone.find(".combobox-container:last").remove();//去重复
value_clone.find("select").attr("name","name");//为控件的name属性赋值，combobox会将该属性值传递给input
value_clone.find(".combobox").combobox();
....
</script>

2.无法新增输入，获取不到combobox的值。

一个是在上面jsp的js中为combobox的select属性name 赋值；

再一个需要修改一下bootstrap combobox的js 文件：

查看原文件会发现，在input失去焦点时会调用blur函数，该函数里面会将this.element和this.target清空，所以造成无法输入新的内容。我的解决方法：没有删除清空操作，在最后重新赋值。

, blur: function (e) {
var that = this;
this.focused = false;
var val = this.$element.val();
if (!this.selected && val !== '' ) {
this.$element.val('');
this.$source.val('').trigger('change');
this.$target.val('').trigger('change');//source code , don't allow input new value
//add two line code to allow add new value, more than just select
this.$element.val(val);
this.$target.val(val);
}
if (!this.mousedover && this.shown) {setTimeout(function () { that.hide(); }, 200);}
}