Ajouter une autre liste de sélection avec jQuery

Question

J'ai une liste déroulante et une fois que l'utilisateur change l'option par défaut value = "" (sur Change) en quelque chose d'autre dans la liste, je voudrais que le formulaire l'ajoute liste déroulante à nouveau avec un nom différent +1 ou quelque chose de similaire avec la possibilité d'ajouter un nombre illimité de liste déroulante ... Je prévois de l'utiliser pour construire une liste de tags dynamiquement.

Ceci est un script similaire j'ai trouvé qui travaille avec input type = « text » http://jsfiddle.net/jaredwilli/tZPg4/4/

$(function() { 
    var scntDiv = $('#p_scents'); 
    var i = $('#p_scents p').size() + 1; 

    $('#addScnt').live('click', function() { 
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
      i++; 
      return false; 
    }); 

    $('#remScnt').live('click', function() { 
      if(i > 2) { 
        $(this).parents('p').remove(); 
        i--; 
      } 
      return false; 
    }); 
}); 

    <h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
    <div id="p_scents"> 
    <p> 
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
    </p> 
    </div> 

Je voudrais réellement savoir comment faire la même chose, sauf que je voudrais ajouter un liste déroulante plutôt qu'un texte d'entrée ...

Toute aide sera grandement appréciée! :)

thx

Answer 1

Il suffit de changer ce qui est ajouté à une liste de sélection ....

<label for="p_scnts"><select id="p_scnt" name="p_scnt_' + i +'"><option value="">ONE</option><option value="">TWO</option></select></label> 

Updated Fiddle here

Answer 2

Essayez comme ci-dessous, il vous aidera à ...

Violon:http://jsfiddle.net/tZPg4/5136/

HTML:

<div id="divselection"> 
<p> 
<select class="target"> 
    <option value="option1" selected="selected">Option 1</option> 
    <option value="option2">Option 2</option> 
</select> 
</p> 
<div> 

JQuery:

$(document).on("change", ".target", function(){ 
    $("#divselection").html($("#divselection").html() + "<p><select class='target'>" + $(this).html() + "</select><a href='#' id='remScnt'>Remove</a></p>"); 
});  

$(document).on("click", "#remScnt", function(){ 
    $(this).parents('p').remove(); 
});