11544 sujets

JavaScript, DOM et API Web HTML5

Afficher des div cachées avec une liste déroulante

Bonjour,

J'aimerais afficher des div "cachées" à la sélection d'une des option de ma liste déroulante (<select>).

En cherchant, j'ai récupéré une code (sur ce forum d'ailleurs) pour faire cela mais cette fois-ci c'est avec des liens.

J'ai donc tenté de modifier le code pour l'adapter mais cela ne marche pas.

Je vous donne les deux codes.

Merci beaucoup de votre aide !


Code d'origine (qui fonctionne)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  $(function(){
    var divs = $("div");
    divs.not("#box1").hide();
    $("a").click(function(){
      divs.filter(":visible").hide();
      $($(this).attr("href")).show();
      return false;
    });
  });
</script>
 
<ul>
  <li><a href="#06">Département 06</a></li>
  <li><a href="#09">Département 09</a></li>
</ul>



Code modifié (qui ne fonctionne pas)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  $(function(){
    var divs = $("div");
    divs.not("#box1").hide();
    $("option").click(function(){
      divs.filter(":visible").hide();
      $($(this).attr("value")).show();
      return false;
    });
  });
</script>
 
<select>
  <option value="#06">Département 06</option>
  <option value="#09">Département 09</option>
</select>

Modifié par hansou (02 Jul 2013 - 11:26)
Hello,

Pour pouvoir vérifier ce qu'il ne fonctionne pas, ça serait utile de nous donner le code complet (avec les divs).

A+
Voici les codes complets, désolé

Code d'origine (qui fonctionne)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
  $(function(){
    var divs = $("div");
    divs.not("#box1").hide();
    $("a").click(function(){
      divs.filter(":visible").hide();
      $($(this).attr("href")).show();
      return false;
    });
  });
</script>

</head>


<body>

<ul>
  <li><a href="#06">Département 06</a></li>
  <li><a href="#09">Département 09</a></li>
</ul>



<div id="06" class="table-pharma">
	<table>
			<tr>
				<td><p>Nom</p></td>
				<td><p>Adresse</p></td>
				<td><p>Code Postal</p></td>
				<td><p>Ville</p></td>
				<td><p>Téléphone</p></td>
			</tr>

	</table>
</div>

<div id="09" class="table-pharma">
	<table>

			<tr>
				<td><p>Pharmacie de Naurois</p></td>
				<td><p>129 rue Albert Sans</p></td>
				<td><p>09400</p></td>
				<td><p>Saurat</p></td>
				<td><p>05 61 05 95 17</p></td>
			</tr>
	</table>
</div>


Code modifié (qui ne fonctionne pas)
<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  $(function test(){
    var divs = $("div");
    divs.not("#box1").hide();
    $("option").(function(){
      divs.filter(":visible").hide();
      $($(this).attr("value")).show();
      return false;
    });
  });
</script>




<select onchange="test(this.value);">
  <option value="#06">Département 06</option>
  <option value="#09">Département 09</option>
  </select>


<div id="06" class="table-pharma">
	<table>
			<tr>
				<td><p>Nom</p></td>
				<td><p>Adresse</p></td>
				<td><p>Code Postal</p></td>
				<td><p>Ville</p></td>
				<td><p>Téléphone</p></td>
			</tr>

			
	</table>
</div>

<div id="09" class="table-pharma">
	<table>
			
			<tr>
				<td><p>Pharmacie de Naurois</p></td>
				<td><p>129 rue Albert Sans</p></td>
				<td><p>09400</p></td>
				<td><p>Saurat</p></td>
				<td><p>05 61 05 95 17</p></td>
			</tr>
	</table>
</div>

Modifié par hansou (02 Jul 2013 - 12:48)
Tu as deux codes différents avec pour chaque une façon de faire qui aurait pu marcher. Smiley sweatdrop

Enfin bref, voici une solution :


$(function () {
    var divs = $("div");
    divs.not("#box1").hide();
    $("#listName").change(function () {
        divs.filter(":visible").hide();
        $($(this).val()).show();
        return false;
    });
});




<select id="listName">
    <option value="#06">Département 06</option>
    <option value="#09">Département 09</option>
</select>
<div id="06" class="table-pharma">
    <table>
        <tbody>
            <tr>
                <td>
                    <p>Nom</p>
                </td>
                <td>
                    <p>Adresse</p>
                </td>
                <td>
                    <p>Code Postal</p>
                </td>
                <td>
                    <p>Ville</p>
                </td>
                <td>
                    <p>Téléphone</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="09" class="table-pharma">
    <table>
        <tbody>
            <tr>
                <td>
                    <p>Pharmacie de Naurois</p>
                </td>
                <td>
                    <p>129 rue Albert Sans</p>
                </td>
                <td>
                    <p>09400</p>
                </td>
                <td>
                    <p>Saurat</p>
                </td>
                <td>
                    <p>05 61 05 95 17</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Sujet clos
Aller à