The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using 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" />

The copying to another container is successful but unfortunately, the chosen elements do not load when focused on.

javascriptjqueryhtmlcssjquery-chosen

Answer №1

Remove the plugin when duplicating elements and then reinitialize them after adding them again:

Here is a suggestion to achieve this:

$(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" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage predefined JavaScript functions within an Angular template

I have been attempting to execute an eval function within my angular template in the following manner: <div *ngFor="..."> <div *ngIf="eval('...')"></div> </div> You understand what I'm trying to ...

javascripthtmlangular

Looking for assistance in eliminating excess space in the JQuery dialog footer

Having trouble with unwanted space on the footer of a modal dialog in our ASP.NET Web Application when using JQuery library 1.11. Although I managed to hide the title bar, I am unable to get rid of the footer space. Below is the HTML and script for displa ...

jquery

MongoDB Stitch retrieves all data fields

Can anyone help me with my MongoDB query issue? I've recently started working with mongoDB and I'm having trouble getting just one field back for all my documents. var docs = db.collection("articles").find({}, { _id: 0, title:1}).asArray(); De ...

javascriptangularjsmongodbmongodb-stitch

Toggle the visibility of a div based on the user's session status

Having an admin link with the div id "admin" and starting sessions when a user is logged in helps distinguish between normal users and admins. While normal users are restricted access to files designated for admin only, they can still view the admin link. ...

phphtmlshow-hide

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

Is it necessary to include async/await in a method if there is already an await keyword where it is invoked?

Here are the two methods I have written in Typescript: async getCertURL(pol: string): Promise<string> { return await Api.getData(this.apiUrl + pol + this.certEndpoint, {timeout: 60000}).then( (response) => { return response.data.certUR ...

javascripttypescriptasync-await

Leverage the power of DOMXPath in combination with the query function

Here is a snippet of HTML code to work with: <ul id="tree"> <li> <a href="">first</a> <ul> <li><a href="">subfirst</a></li> <li><a href=""> ...

phphtmlxpathdomdocument

Converting JavaScript code from Jade into EJS framework

I am currently working on converting code from Jade to EJS and could use some assistance. I have started the translation process, but I'm not entirely confident in my approach. Additionally, I find the syntax used in EJS to be confusing compared to tr ...

javascriptnode.jsejs

Implementing a Collapse and Expand All feature within an Accordion Component

Hey there! I've been attempting to implement a Collapse All feature on my accordion but am having trouble figuring it out. The resource I've been referencing is this one. I've searched around and noticed that this accordion setup is a bit d ...

javascripthtmlcssaccordion

Retrieving JSON data from an API's array

Encountering a minor JSON dilemma, I am trying to access the translations data in the API using this endpoint . However, I am struggling with retrieving the desired information. results = data.results; var li= ''; for (const x of results) { l ...

jqueryarraysjsonapi

Dynamic sizing of HTML elements

I'm currently developing a timeline feature using slick slider and I'm exploring ways to dynamically adjust the vertical line height for each event based on the text content. You can view the current timeline implementation at the following link ...

javascriptphpjquery

Making AngularJS work with angular-ui bootstrap and ensuring compatibility with IE8

Having trouble getting AngularJS code that utilizes angular-ui bootstrap to function properly in IE 8? Following the guidelines in the AngularJS developer guide on IE didn't seem to solve the issue for me. I inserted the code snippet below into my ind ...

javascriptangularjstwitter-bootstrap

Passing a PHP variable between PHP files with the help of jQuery

I'm facing a minor issue. I'm trying to pass a PHP variable from one PHP file to another using setInterval. However, I'm unsure of how to include the PHP variable in my jQuery code. Here is the content of first.php: <?php $phpvariable= ...

javascriptphpjqueryajax

Phantom.js: Exploring the Power of setTimeout

Below is a snippet of code that intends for Phantom.js to load a page, click on a button, and then wait for 5 seconds before returning the HTML code of the page. Issue: Utilizing setTimeout() to introduce a delay of 5 seconds leads to the page.evaluate fu ...

javascriptnode.jsmeteorphantomjs

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap

Is there a way to modify or update the CSS classes and overall styling in .gsp files within the Grails framework?

What is the best way to dynamically update a DOM element's class and styling in response to specific conditions or events occurring in a .gsp file? ...

jquerycssgrails

What is the best way to develop a widget that loads asynchronously by implementing AJAX, JavaScript, and PHP?

Currently, this widget is in need of items that are sourced from a php file. For instance, the javascript function should generate a table within this div element. <div id="widget"></> The aim is to dynamically update the content with the ht ...

phpjavascriptajax

Resolving formatting challenges in R markdown with Blastula

Dealing with formatting problems while trying to include an R markdown file in an email body. As a CSS novice, I'm struggling to find a solution and it's becoming quite frustrating. The table has the following CSS styling: <!DOCTYPE html ...

cssremailmarkdownblastula

Utilizing AngularJS to show content based on regular expressions using ng-show

With two images available, I need to display one image at a time based on an input regex pattern. Here is the code snippet: <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="../close.png" ng-show="password != [ ...

javascriptangularjshtml

Substituting Div containers with elements imported from external files

Imagine I have <div> <div id="stuff"> <!-- stuff --> </div> </div> Could I move the content of <div id="stuff"> into a separate file named stuff.html, and then replace the code above with something simi ...

htmlangularjs