Почему не работает bootstrap-select при клонировании?

Question

[Diversia]

Здравствуйте!

Подключил плагин bootstrap-select. Клонирую элемент с классом "video-item" функцией clone(). Далее пытаюсь выбрать значение в списке, но значение не устанавливается. У первого (не клонированного) элемента bootstrap-select работает (значение выбирается), а у клонированного не работает (не выбирается). Помогите пожалуйста!

<div class="video-list">

			<div class="row video-item">

				<div class="col-md-4">
					<div class="form-group">
						<select class="selectpicker form-control" name="video[type][]" data-live-search="true">
							<option>111</option>
							<option>222</option>
						</select>
					</div>
				</div>

				<div class="col-md-4">
					<div class="form-group">
						<select class="selectpicker form-control" name="video[actor][]" data-live-search="true">
							<option>aaaa</option>
							<option>bbbb</option>
						</select>
					</div>
				</div>

			</div>

		</div>

		<button type="button" id="addVideo" class="btn btn-danger">Добавить еще</button>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/i18n/defaults-ru_RU.js"></script>

<script type="text/javascript"> 
$(document).ready(function() {
	$('#addVideo').click(function(){
		$(".video-item").clone().removeClass("video-item").appendTo(".video-list");
	});
});
</script>

Answer 1

[tyzberd]

https://jsfiddle.net/ax5dzycL/1/

Comments

[Diversia]

tyzberd спасибо Вам огромное!

[Diversia]

tyzberd подскажите пожалуйста, а как скопировать весь див <div class="row video-item">...</div>?

<div class="video-list">

      <div class="row video-item">

        <div class="col-md-4">
          <div class="form-group">
            <select class="selectpicker form-control" name="video[type][]" data-live-search="true">
              <option>111</option>
              <option>222</option>
            </select>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group">
            <select class="selectpicker form-control" name="video[type2][]" data-live-search="true">
              <option>111-111</option>
              <option>222-222</option>
            </select>
          </div>
        </div>

      </div>

    </div>

    <button type="button" id="addVideo" class="btn btn-danger">Добавить еще</button>

[tyzberd]

Diversia: https://jsfiddle.net/ax5dzycL/2/

[Diversia]

tyzberd: Спасибо. А если два элемента select в группе?

[tyzberd]

https://jsfiddle.net/ax5dzycL/3/

[Diversia]

tyzberd Я прошу прошу прощения. Есть небольшое уточнение. Select находится в разных div: сначало идет col-md-4, а за тем form-group, а вот в нем уже сам Select. Посмотрите пожалуйста:

<div class="video-list">

      <div class="row video-item">

        <div class="col-md-4">
          <div class="form-group">
            <select class="selectpicker form-control" name="video[type][]" data-live-search="true">
              <option>111</option>
              <option>222</option>
            </select>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group">
            <select class="selectpicker form-control" name="video[actor][]" data-live-search="true">
              <option>aaaa</option>
              <option>bbbb</option>
            </select>
          </div>
        </div>

      </div>

    </div>

    <button type="button" id="addVideo" class="btn btn-danger">Добавить еще</button>

Нужно скопировать все содержимое с классом video-item, в котом вложены select.

[tyzberd]

Diversia: https://jsfiddle.net/ax5dzycL/5/

[Diversia]

tyzberd: если вставить еще div, то уже работает некорректно. Не могу разобраться с кодом JS.

Например:

<div class="video-list">

      <div class="row video-item" id="original-video-item">

        <!-- новый div -->
        <div class="col-md-4">
          <div class="form-group">
            <input type="text" name="video[url][]" class="form-control" placeholder="Ссылка на видео" maxlength="200" max="200">
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group">
            <select class="selectpicker form-control" name="video[type][]" data-live-search="true">
              <option>111</option>
              <option>222</option>
            </select>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group">
            <select class="selectpicker form-control" name="video[actor][]" data-live-search="true">
              <option>aaaa</option>
              <option>bbbb</option>
            </select>
          </div>
        </div>

      </div>

    </div>

    <button type="button" id="addVideo" class="btn btn-danger">Добавить еще</button>

[Diversia]

tyzberd:

$('#addVideo').click(function(){
	var newVideoItem = $('#original-video-item').clone();
	var newSelectpicker = newVideoItem.find(".selectpicker");
	newVideoItem.find('.video-item').each(function(index){   /* изменил на video-item*/
	$(this).html(newSelectpicker.eq(index));    
			newSelectpicker.selectpicker();
	});
	newVideoItem.appendTo(".video-list");
	});

<div class="video-list">

      <div class="row" id="original-video-item">

        <!-- новый div -->
        <div class="col-md-4">
          <div class="form-group video-item"> <!-- добавил video-item --> 
            <input type="text" name="video[url][]" class="form-control" placeholder="Ссылка на видео" maxlength="200" max="200">
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group video-item"> <!-- добавил video-item --> 
            <select class="selectpicker form-control" name="video[type][]" data-live-search="true">
              <option>111</option>
              <option>222</option>
            </select>
          </div>
        </div>

        <div class="col-md-4">
          <div class="form-group video-item"> <!-- добавил video-item --> 
            <select class="selectpicker form-control" name="video[actor][]" data-live-search="true">
              <option>aaaa</option>
              <option>bbbb</option>
            </select>
          </div>
        </div>

      </div>

    </div>

    <button type="button" id="addVideo" class="btn btn-danger">Добавить еще</button>

получается некорректно

[tyzberd]

https://jsfiddle.net/ax5dzycL/6/

[Diversia]

Вы меня очень выручили! Большое Вам спасибо!

[tyzberd]

даже так https://jsfiddle.net/ax5dzycL/7/

[Diversia]

tyzberd подскажите пожалуйста, а как очистить value для video[url][] ?

[tyzberd]

так очистятся все input в новом video-item https://jsfiddle.net/ax5dzycL/8/

[Diversia]

tyzberd если ввести в ipnut текст, а затем нажать кнопку, но текст будет скопирован. А select'ы при этом не будут копировать выставленные значения.