How to run multiple jQuery choosen() on the same form using clone() -


i want clone choosen object when user clicks button. far can manage copy fields/select input box, new elements added / cloned, dossent react on choosen() call;

i have added code far:

the html code:

<select data-placeholder="choose something" class="classname" name="somthinghere[]">      <option value="123">somthing</option>      <option value="124">somthing again</option> </select> 

button trigger clone:

<button class="add_field_button btn btn-warning" data-fields="0" name="add">add more selectfields , use choosen plugin</button>    

the jquery script handles cloing of select element, , trigger choosen object.

<script>                             $(document).ready(function() {         $(".add_field_button").click(function(e){              e.preventdefault();              var add_button = $(this);             var fieldset   = add_button.closest('.fieldset-clone');             var fieldset_clone;             var fieldset_content;              fieldset_clone = add_button                             .closest('.fieldset-clone')                             .find('.fieldset-content')                             .eq(0)                             .clone();              fieldset_content = $('<div>')                 .addclass('remove-button')                 .append(fieldset_clone.children());              add_button.before(fieldset_content);             add_remove_btn(fieldset_content);              $('.ny-matrett').chosen();         });     }); </script> 

you need "destroy" chosen before cloning it. after cloning, can rebuild chosen. here 1 way, if have correctly understood question :

https://jsfiddle.net/xgqbfth7/

html part :

<div id="home">    <fieldset>     <legend>#1     </legend>     <div class="fieldset-content">       <div>         <select data-placeholder="choose something" class="classname" name="somthinghere[]">           <option value="123">somthing</option>           <option value="124">somthing again</option>         </select>       </div>        <button class="add_field_button btn btn-warning" data-fields="0" name="add">add more selectfields , use choosen plugin</button>     </div>   </fieldset>  </div> 

js part :

var x = 1;   $(document).ready(function() {     jquery('#home select').chosen();    jquery(document).on('click', '.add_field_button', function(e) {      makechosen(false);      x++;      e.preventdefault();      var add_button = $(this);      var fieldset = add_button.closest('fieldset');      var newfieldset = fieldset.clone(true, false).appendto('#home');      newfieldset.find('select').append('<option value="">test ' + x + '</option>');      newfieldset.find('legend').html(x);      makechosen(true);    });  });   function makechosen(status) {    if (status) jquery('#home select').chosen();    else {      jquery('#home select').chosen('destroy');    }  } 

Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -