动态添加搜索框

有时候我们做的项目 需要做搜索，有时候复杂的搜索需要多个搜索框。如下：

有时候我们需要动态添加，这时候我们不需要重复添加代码，只需要用jquery的clone方法赋值对应的对话框即可。

html：

<div  class="container"  style="margin-bottom: 15px">

<div style="margin-bottom: 15px">
<select class="selectpicker" data-live-search="true" style="top: 200px">
  <option data-tokens="ketchup mustard">SN</option>
  <option data-tokens="mustard">IP</option>
  <option data-tokens="frosting">园区</option>
  <option data-tokens="frosting">库房名称</option>
</select>
 <select class="selectpicker" data-live-search="true" style="top: 200px">
  <option data-tokens="ketchup mustard">精确搜索</option>
  <option data-tokens="mustard">模糊搜索</option>

</select>

<input type="text" class="form-control" placeholder="多个IP和sn请空格隔开。">
<button class="btn btn-default add" onclick="Add_Row(this)"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button class="btn btn-default del" onclick="Del_Row(this)" ><i class="fa fa-minus" aria-hidden="true"></i></button>
<button class="btn btn-primary  ser"><i class="fa fa-search" aria-hidden="true"></i> 搜索</button>
</div>

</div>

 js部分：

<script>
    function Add_Row(ths) {
        var cl_p=$(ths).parent().clone();
        $(ths).parent().parent().append(cl_p);

        $(ths).parent().find('.ser').remove();
        $(ths).parent().find('.add').remove();
    }
    function Del_Row(ths) {
        var tag=$(ths).parent().prev();
        if (tag.length===0){
            $(ths).parent().remove();
        }else {
            tag.remove();
        }
    }
</script>

 导入css和js

     <!--<link href="bootstrap-select.css" rel="stylesheet">-->
     <link href="bootstrap.min.css" rel="stylesheet">
    <!--<script src="bootstrap-select.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

 按照上面的方法实现了动态加载搜索框，但是出现新的问题，就是select下拉框失效了。下拉框点击无效。

查询网上解决方法，需要重新初始化selecter。可以生效。但是新的问题又出现。

在初始化 的时候。又出现一个问题，在含有bootstrap-select的div里 有嵌套个bootstrap-select。如下：

解决方法：

js：

cl_p.find('.bootstrap-select').replaceWith(function() { return $('select', this); });

 

 问题解决地址：

https://github.com/silviomoreto/bootstrap-select/issues/605