Discussion :

[Fabien.bontemps]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[danielhagnoul]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
        }
    });
 
});

[Fabien.bontemps]

Exact danielhagnoul depuis la version 1.7

donc j'ai remplacé par 'on'

ce qui donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :



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.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(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.

[danielhagnoul]

Bonjour

Je crois avoir compris que :

1. Chaque "select" ayant la classe "cat" doit avoir un gestionnaire "change" pour tenir compte du choix de l'utilisateur de la page web.
2. 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.
3. 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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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() );
    });
 
});