Discussion :

[andlio]

Bonjour à tous,

Je voudrais, à l'aide de JQuery, cloner un select (avec ses options) qui n'a pas de sélection.
Il faut ensuite que je sélectionne une option spécifique.

J'arrive à cloner et à afficher le nouveau select.
J'arrive à récupérer l'option qui doit être sélectionnée.
Mais je n'arrive pas à la sélectionner.

... En je ne vois vraiment pas le problème

Voici le select à copier :

Code :

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

1
2
3
4
5
<select id="users_list" name="manager.id" class="text ui-widget-content ui-corner-all">
     <option value="1">User 1</option>
     <option value="2">User 2</option>
     <option value="3">User 3</option>
</select>

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// Declare variables
var newIndex = parseInt(getMaxTeamIndex()) + 1;
var newSelectName = "teams["+ newIndex + "].manager.id";
var newTeamManagerId = $( "#users_list option:selected" ).val();
 
// Create the new select options
var newSelectOptionsTag = $("#users_list").clone();
 
// Select the right option
newSelectOptionsTag
	.find("option[value=\"" + newTeamManagerId + "\"]")
	.attr("selected","selected");

[danielhagnoul]

Bonsoir

J'ignore la valeur de getMaxTeamIndex().

Exemple :

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
var newTeamManagerId = 2;
 
// Créer le clone
var newSelectOptionsTag = $("#users_list").clone();
 
// Modifié l'ID car un ID doit être unique
// Modifié le name
// Sélectionné l'option newTeamManagerId
// Placé le clone dans la div.conteneur
newSelectOptionsTag
	.attr({
		"id": "user_list_clone",
		"name": "teams[202].manager.id"
	})
	.find("option[value='" + newTeamManagerId + "']")
	.attr("selected","selected")
	.end() // pour ajouter le clone et pas l'option sélectionnée
	.appendTo(".conteneur");
 
// Résultat
/*
<select class="text ui-widget-content ui-corner-all" name="teams[202].manager.id" id="user_list_clone">
     <option value="1">User 1</option>
     <option value="2" selected="selected">User 2</option>
     <option value="3">User 3</option>
</select>
*/