Discussion :

[Invité]

Salut à tous, comme mon titre l'indique je possède dans mon formulaire un champ pour sélectionner une catégorie, je voudrais maintenant qu'un autre select apparaisse après avoir sélectionné une des catégories. Un autre select qui contient des sous-categories.

A savoir mes categories et sous categories sont dans des tables différentes.

Voici ce que j'ai réussi à faire pour le moment ...

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
29
30
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js" /></script>
<script type="text/javascript">
 
$('#incident_category_id').on('change', function() { //WHEN USER CHANGES FIRST OPTION
var fromVal = $(this).val(); //MAKE VARIABLE OF SELECTED CHOICE
document.write("Test");
 
var myDiv = document.getElementById("myDiv");
 
//Create array of options to be added
 
foreach($db->query("SELECT * FROM sous_categories WHERE categorie_id = '$fromVal'") as $row) {
     $array[] = array("id" => $row['id'], "name" => $row['name']);
};
//Create and append select list
var selectList = document.createElement("select");
selectList.id = ("mySelect");
myDiv.appendChild(field);
 
//Create and append the options
for (var i in array) {
    var option = document.createElement("option");
    option.value = array[o[i]];
    option.text = array[i];
    selectList.appendChild(option);
});
});
});
</script>
</script>

Je suis débutant en Javascript, d'ailleurs je n'en avait jamais fait avant aujourd'hui...
Il faut savoir que les sous categories sont reliées aux categories par un identifiant. L'appli est en Rails.

Merci beaucoup !

[Diablo_22]

Bonjour,

voici un exemple de base en pur JS. Tu nous dit pas si tu utilise un framework JS (jquery ou autres)

LIVE DEMO...!!!

[Invité]

Merci à toi @Diablo_22,

voici le code complet de mon formulaire en Rails :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<%= form_for(@incident) do |f| %>
  <% if @incident.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@incident.errors.count, "error") %> prohibited this incident from being saved:</h2>
 
      <ul>
      <% @incident.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
 
  <div class="field">
    <%= f.label "Titre" %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label "Contenu" %><br>
    <%= f.text_field :content %>
  </div>
  <div class="field" style="display: none;">
    <%= f.label "Nom d'utilisateur" %><br>
    <%= select_tag("incident[user_id]", options_for_select(User.find_by_sql("SELECT `users`.* FROM `users` WHERE `id` = #{current_user.id}").collect{ |u| [u.name, u.id]})) %>
  </div>
  <div class="field">
    <%= f.label "Catégorie de l'incident" %><br>
    <%= cat_select = select_tag("incident[category_id]", options_for_select(Category.find_by_sql("SELECT `categories`.* FROM `categories`").collect{ |u| [u.name, u.id]}))%>
  </div>
  <div id="field">
    <%= f.label "Sous_Catégorie de l'incident" %><br>
    <%= cat_select = select_tag("incident[sous_category_id]", options_for_select(SousCategory.find_by_sql("SELECT `sous_categories`.* FROM `sous_categories` ").collect{ |u| [u.name, u.id]}))%>
  </div>
  <div class="field" style="display: none;">
    <%= f.label "Type de l'évenement"%>
    <%= f.number_field :evenement_type_id, :value => 1 %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
 
 
 
 
<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js" /></script>
<script type="text/javascript">
$('#incident_category_id').on('change', function() { //WHEN USER CHANGES FIRST OPTION
var fromVal = $(this).val(); //MAKE VARIABLE OF SELECTED CHOICE
document.write("Test");
 
var myDiv = document.getElementById("field");
 
//Create array of options to be added
 
foreach($db->query("SELECT * FROM sous_categories WHERE categorie_id = '$fromVal'") as $row) {
};
    var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.id = ("incident_sous_category_id");
myDiv.appendChild(selectList);
 
//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.setAttribute("value", array[i]);
    option.text = array[i];
    selectList.appendChild(option);
});
});
});
</script>
</script>
-->

Je ne sais pas si j'utilise un quelqu'onque framework, je suis débutant donc si je peux utiliser JS pur ce sera peut être plus simple.
Et puis, le code que tu ma donné est tout à fait ce que je voudrais réaliser mais ne correspond pas trop à mon cas puisque je récupère mes sous-categories par une requête sql et avec ta méthode je ne peux pas faire ça... En bref, je voudrais qu'il me crée le formulaire de selection lui même par rapport aux résultats de la requête sql...


EDIT : Je viens de voir que mon message n'était peut être pas très clair.

Mon application (encore et toujours de gestion de tickets d'incidents) contiendra des catégories au départ mais on pourra en rajouter autant qu'on en veux, idem pour les sous-catégories. Donc je ne peux pas faire comme tu m'as montré. Il faudrait que lorsque l'utilisateur sélèctionne une catégorie, l'appli fasse une requête SQL pour trouver les sous-catégories correspondantes.

[Diablo_22]

va falloir associé du Jquery/JSON pour faire tes requêtes via RAILS et afficher les resultats dans les différentes listes

Exemple

[Invité]

J'ai beau lire, relire, je n'y comprends pas grand chose, tu peux m'expliquer ?

[Diablo_22]

L'application que tu développe c'est une application qui existe avant et que tu améliore ou c'est une application que tu as crée toi même ..?