Выбран JQuery скрипт не работает

Question

Я использую JQuery выбран элемент выбора, чтобы сделать его более удобным для пользователя, но это не работает, когда я делаю копию выбранного DIV в другой DIV с помощью JQuery

$(document).ready(function() { 
 
    $(".chosen").chosen({}); 
 

 
    $("#movechosen").click(function() { 
 
    var chosenHtml = $(".mycontainer").html(); 
 
    $(".movecontainer").append(chosenHtml); 
 
    }); 
 
});

<div class="mycontainer" style="background:#ddd"> 
 
    Container 1: <select class="chosen" multiple> 
 
     <option>Select option</option> 
 
     <option>USA</option> 
 
     <option>Germany</option> 
 
     <option>India</option> 
 
     <option>China</option> 
 
     <option>Canada</option> 
 
     <option>Australia</option> 
 
    </select> 
 
    </div> 
 
    <div class="movecontainer" style="background:#e1e1e1"> 
 
    Container 2 : 
 
    </div> 
 
<input type="button" value="copy to container 2" id="movechosen" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css" />

Это копирование в другой контейнер, но когда вы фокусируетесь на выбранном, он не будет загружать элементы, доступные в нем.

Answer 1

уничтожить плагин, когда вы клонировать элементы, а затем повторно инициализировать их после Append:

попробуйте следующее:

$(document).ready(function() { 
 
    $(".chosen").chosen(); 
 

 
    $("#movechosen").click(function() { 
 
    $(".chosen").chosen("destroy"); 
 
    var chosenHtml = $(".mycontainer").html(); 
 
    $(".movecontainer").append(chosenHtml); 
 
    $(".chosen").chosen(); 
 

 
    }); 
 
});

<div class="mycontainer" style="background:#ddd"> 
 
    Container 1: <select class="chosen" multiple> 
 
     <option>Select option</option> 
 
     <option>USA</option> 
 
     <option>Germany</option> 
 
     <option>India</option> 
 
     <option>China</option> 
 
     <option>Canada</option> 
 
     <option>Australia</option> 
 
    </select> 
 
    </div> 
 
    <div class="movecontainer" style="background:#e1e1e1"> 
 
    Container 2 : 
 
    </div> 
 
<input type="button" value="copy to container 2" id="movechosen" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css" />