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">Nametd>
<td style="width: 300px"  id ="name_area">
    <select class="combobox form-control" name="name" id="name"  >
            <option value="" selected="selected">Select a Nameoption>
            <option value="PHP">PHPoption>
            <option value="MySQL">MySQLoption>
            <option value="SQL">SQLoption>
            <option value="PostgreSQL">PostgreSQLoption>
            <option value="HTML">HTMLoption>
            <option value="CSS">CSSoption>
    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代码：

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);}
    }