Question

我一直在使用bootstrap selectpicker，我已经添加了一个Add Button，供用户根据需要复制按钮。问题是，selectpicker不能处理第二个/克隆元素，下拉列表的值只是显示而不是在点击时改变。

主要选择：

<div id="main_product">
  <select name="product[]" class="selectpicker" >
   <option value="Tube Lights" >Tube Lights</option>
   <option value="Downlights" >Downlights</option>
  </select>
</div>

克隆功能：

function clone()
{
    var $orginal = $('#main_product');
    var $cloned = $orginal.clone();

    $cloned.appendTo('#new_products');
    // $cloned.find('.bootstrap-select').remove();
    // $cloned.find('select').selectpicker();
}

请注意，我尝试将selectpicker重新分配给注释atm中的克隆对象，因为它也可以工作。

任何帮助都会非常感激。

Answer 1

我遇到了这个问题，但如果现在使用最新版本，则选择放在.bootstrap-select元素内，以便进行html5错误处理。 remove（）也删除了select，解决方法是：

而不是：

$cloned.find('.bootstrap-select').remove();

使用：

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

这将用它包含的select元素替换.bootstrap-select元素。

Answer 2

function clone()    
{    
  //you can use :    
     var $orginal = $('#main_product');    
     var $cloned = $orginal.clone();    
  //Or    
     var $cloned = $('#main_product').clone(); 

  //then use this to solve duplication problem    
     $cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); })    
     $cloned .find('.selectpicker').selectpicker('render'); 

  //Then Append    
     $cloned.appendTo('#new_products');    
}

Answer 3

如果我们用select替换bootstrap-select，那么问题就出在HTML结构中。因此，原始元素是实际的引导选择，而克隆的则是正常选择。请查看以下内容以进行进一步说明。

代替此

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

使用

$cloned.selectpicker('refresh');
$cloned.find('.bootstrap-select:odd').remove();

Answer 4

更改克隆功能

function clone()
            {
                var $orginal = $('#main_product');
                var $cloned = $orginal.clone();
                var $selectPicker = $cloned.find('select');

                $cloned
                    .find('.bootstrap-select').remove().end()
                    .append($selectPicker).end();

                $cloned.find('select').selectpicker();

                $cloned.appendTo('#new_products');
            }

bootstrap selectpicker和克隆

4 个答案: