[UI Mobile] Clone avec jQuery

Clone avec jQuery

Bonjour à tous,

Je viens vers vous car j'ai un petit soucis. J'aimerais pouvoir ajouter des select comme dans le code si dessous avec "clone" cependant sa clone bien mais impossible de choisir une nouvelle valeur.

Qu'est ce qui pose problème ?

Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
 
<link rel="stylesheet" href="css/mobile.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
     $('select.cat:last').live('change',function(){
          if( $(this).val() != '' )
          {
               $(this).parent().clone(true).insertAfter($(this).parent());
          }
     });
});
</script>
 
 <label for="categorie">Choisissez une catégorie :</label>
<select class="cat" name="categorie[]">
          <option>Sélectionnez une catégorie</option>
          <option value="jquery">JQuery</option>
          <option value="html">HTML</option>
          <option value="php">PHP</option>
          <option value="css">CSS</option>
     </select>

Bonsoir

Je ne comprends pas le code (live est obsolète depuis la mort de Mathusalem ;) ).

Je ne connais pas UI Mobile. En jQuery classique et non obsolète, pour dupliquer le select à partir de l'option sélectionnée :
Code:

1 2 3 4 5 6 7 8 9 10 11 $( function(){ $( "select.cat:last" ).on( "change", function(){ if( $( this ).val() != '' ){ var jObj = $( "option:selected", this ).parent(); jObj.clone( true, true ).insertAfter( jObj ); } }); });

1 pièce(s) jointe(s)

Exact danielhagnoul depuis la version 1.7

donc j'ai remplacé par 'on'

ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript"> $(document).ready(function() { $('select.cat:last').on('change',function(){ if( $(this).val() != '' ) { $(this).parent().clone(true).insertAfter($(this).parent()); } }); }); </script> <label for="categorie">Choisissez une catégorie :</label> <select class="cat" name="categorie[]"> <option>Sélectionnez une catégorie</option> <option value="jquery">JQuery</option> <option value="html">HTML</option> <option value="php">PHP</option> <option value="css">CSS</option> </select>
Cependant chez moi il ne change pas de valeur.

Je m'explique par une image :

Pièce jointe 161760

J'ai beau sélectionner une autre valeur, il ne me valide que celui du 1er select.

Merci

PS: La prochaine fois je ferais gaffe au rubrique. Merci pour le déplacement.

Code:

$(this).parent().clone(true).insertAfter($(this).parent());

Dans le code que tu montres, $(this) correspond au select qui n'a pas de parent donc l'instruction est un peu compliquée à comprendre. :aie:

Bonjour

Je crois avoir compris que :

Chaque "select" ayant la classe "cat" doit avoir un gestionnaire "change" pour tenir compte du choix de l'utilisateur de la page web.
La dernière occurrence du "select" ayant la classe "cat" doit produire un clone la première fois que l'on y sélectionne une valeur.
Le clone doit afficher l'option sélectionnée dans son géniteur.

Pour obtenir ce résultat, il faut deux gestionnaires d'événement "change", un classique et un nommé qui ne sert qu'au clonage. Les codes ci-dessous font ce travail, j'ai testé. Avant de vouloir l'adapter à vos besoins, vous devez faire un test uniquement en copiant-collant, sinon j'aurais certainement droit à un : "ça ne marche pas".
Code:

1 2 label { display: block; margin: 12px; } select { margin: 12px; }
Code:

1 2 3 4 5 6 7 8 9 10 <label>Change = <output id="result"></output></label> <label>Choisissez une catégorie : <select class="cat" name="categorie[]"> <option>Sélectionnez une catégorie</option> <option value="jquery">JQuery</option> <option value="html">HTML</option> <option value="php">PHP</option> <option value="css">CSS</option> </select> </label>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $( function(){ $( "body" ).on( "change.clone", "select.cat:last", function(){ var str = $( this ).val(); if( str != '' ){ var jObjSelect = $( this ), jObjClone = jObjSelect.clone(); jObjSelect.off( "change.clone" ); jObjClone .val( str ) .insertAfter( jObjSelect ); } }); $( "body" ).on( "change", "select.cat", function(){ $( "#result" ).text( $( this ).val() ); }); });