Afficher le contenu d'une puce <li> en fonction d'un menu déroulant

27 juil. 2007, 14:02

Bonjour tout le monde,

ce que j'aimerais faire est assez simple à expliquer.
En fait, je voudrais que quand un utilisateur choisit le premier élément du menu déroulant, on rende visible le contenu d'une puce (qui est un tableau avec des checkbox) dont l'id est 'criteria'. Par contre, quand il choisit un autre élément du menu déroulant, ben cette puce on ne la rend pas visible.

J'ai déjà commencé, mais ça ne marche pas, j'ai du me tromper dans ma fonction javascript, si quelqu'un pouvait m'aider.

formulaire :

Code : Tout sélectionner

<select name="group">
  <?
  foreach ($result_find as $result) {//pour chacun des éléments trouvés, on le renomme en 'right'
  ?>
  <option value="<? echo $result->getAttribute('name'); ?>" onChange="cacher();"><? echo $result->getAttribute('label'); ?></option><? } ?>
  </select>
  </li>
  <li class="right">&nbsp;</li>
  <li style="clear: both; padding-top: 5px;">
    <label class="form-section"><?php echo "All criteria"; ?></label>
  </li>
  <li id="criteria">
    <label><?php echo "Choose te criteria"; ?></label>
    <?/*---------------------------------*/
      //on ouvre le fichier criteria.xml
      $criteriaFile = '../../'.$cfg['ressources_root'].'/criteria.xml';
      $domCriteria = new DOMDocument('1.0','UTF-8');
      $domCriteria->load($criteriaFile);
      $xpCriteria = new DOMXPath($domCriteria);
      $cat_criteria = $domCriteria->getElementsByTagName('cat');
      $result_find_criteria = $domCriteria->getElementsByTagName('criteria');
      
      echo "<table align='center' width='100%'><tr>";
      foreach($cat_criteria as $cat){
        $name_cat = $cat->getAttribute('name');
        $id_cat = $cat->getAttribute('id');
        echo "<td valign='top'><br /><strong>".$name_cat." : </strong>";
        foreach ($cat->childNodes as $criteria)
        {
          if ($criteria->nodeType != XML_ELEMENT_NODE) continue;
          if ($criteria->tagName == 'criteria')
          {
            $name_criteria = $criteria->getAttribute('name');
            $id_criteria = $criteria->getAttribute('id');      
            echo "<ul><input type='checkbox' id='crit[]' name='crit[]' value='$id_cat/$id_criteria'>$name_criteria</input></ul>";
          }
        }
      }
      echo "</tr></table>";
    ?>
  </li>

fonction javascript :

Code : Tout sélectionner

function cacher()
{
   if (document.form.group[1].selected==true)
   {   
      document.getElementById('criteria').style.visibility="visible";
   }
   else
   {      
      document.getElementById('criteria').style.visibility="hidden";
   }
}

27 juil. 2007, 14:49

Salut,
Essaie avec un attribut "onchange" à sa place, c'est à dire dans <select> et non <option>

27 juil. 2007, 14:52

Et utilise la fonction display au lieu de visibility ce sera surement plus sympa.

27 juil. 2007, 14:59

effectivement, avec un onChange et dans le select, c'est mieux

, merci bien

Sinon, display="none" et display="block" oui, c'est mieux. merci bien

27 juil. 2007, 15:03

mais pour l'afficher c'est quoi ?

normalement c'est display = 'block', en fait cela dépend du type d'élément à afficher.

Contente toi de mettre display='' et cela fonctionnera.

Différence entre display et visibility au cas ou tu ne le saurai pas:
Display : cache le block en totalité
Visibility: le block est caché mais compris dans la page ce qui fait généralement des trous entre les éléments.

27 juil. 2007, 15:08

donc ca marche nikel,

mais pour l'optimiser, ca serait possible de "désactiver" cette puce et d'avoir tous mes checkbox grisés et inactif ?

je trouverais ca plus sympa..

j'ai essayé ça, mais sans succès :

Code : Tout sélectionner

function cacher()
{
   if (document.form.group[1].selected==true)
   {   
      var critInputs = document.getElementById('criteria').getElementByTagName('checkbox');
      for ( var i = 0 ; i < critInputs.length ; i++ ) {
      critInputs[i].disable="true";
      }
   }
   else
   {      
      var critInputs = document.getElementById('criteria').getElementByTagName('checkbox');
      for ( var i = 0 ; i < critInputs.length ; i++ ) {
      critInputs[i].disable="false";
      }
   }
}

27 juil. 2007, 15:22

utilise disable=true; et non pas disable="true"; qui est une chaine de caractère.

27 juil. 2007, 15:27

non toujours rien, pas de changement : les checkbox ne deviennent pas grisée et donc inactives.

voila ma fonction :

Code : Tout sélectionner

function cacher()
{
   if (document.form.group[1].selected==true)
   {   
      var critInputs = document.getElementById('criteria').getElementsByTagName('checkbox');
      for ( var i = 0 ; i < critInputs.length ; i++ ) {
      critInputs[i].disable=true;
      }
   }
   else
   {      
      var critInputs = document.getElementById('criteria').getElementsByTagName('checkbox');
      for ( var i = 0 ; i < critInputs.length ; i++ ) {
      critInputs[i].disable=false;
      }
   }
}

et voilà là ou je l'appele :

<select name="group"  onChange="cacher();">
  <?
  foreach ($result_find as $result) {//pour chacun des éléments trouvés, on le renomme en 'right'
  ?>
  <option value="<? echo $result->getAttribute('name'); ?>"><? echo $result->getAttribute('label'); ?></option><? } ?>
  </select>
  </li>
  <li class="right">&nbsp;</li>
  <li style="clear: both; padding-top: 5px;" id="titleCriteria">
    <label class="form-section"><?php echo "All criteria"; ?></label>
  </li>
  <li id="criteria">
    <label><?php echo "Choose the criteria"; ?></label>
    <?/*---------------------------------*/
      //on ouvre le fichier criteria.xml
      $criteriaFile = '../../'.$cfg['ressources_root'].'/criteria.xml';
      $domCriteria = new DOMDocument('1.0','UTF-8');
      $domCriteria->load($criteriaFile);
      $xpCriteria = new DOMXPath($domCriteria);
      $cat_criteria = $domCriteria->getElementsByTagName('cat');
      $result_find_criteria = $domCriteria->getElementsByTagName('criteria');
      
      echo "<table align='center' width='100%'><tr>";
      foreach($cat_criteria as $cat){
        $name_cat = $cat->getAttribute('name');
        $id_cat = $cat->getAttribute('id');
        echo "<td valign='top' align='left'><br /><strong>".$name_cat." : </strong>";
        foreach ($cat->childNodes as $criteria)
        {
          if ($criteria->nodeType != XML_ELEMENT_NODE) continue;
          if ($criteria->tagName == 'criteria')
          {
            $name_criteria = $criteria->getAttribute('name');
            $id_criteria = $criteria->getAttribute('id');      
            echo "<ul><input type='checkbox' id='crit[]' name='crit[]' value='$id_cat/$id_criteria'>$name_criteria</input></ul>";
          }
        }
      }
      echo "</tr></table>";
    ?>
  </li>

27 juil. 2007, 15:47

Bon j'ai pas regarder ce que tu a fait mais après un petit test cela donne :

JAVASCRIPT

Code : Tout sélectionner

<script>
function enable_disable(id) {
elmt = document.getElementById(id);
if(elmt.disabled == true)
{
elmt.disabled = false;
}
else
{
elmt.disabled = true;	
}
};
</script>

HTML

Code : Tout sélectionner

<input id="test_chk" type="checkbox" disabled/>OK
<input type="button" value="ok" onclick="enable_disable('test_chk');" />

EDIT: du coup en regardant ton code c'est disabled et non pas disable qu'il faut utiliser

27 juil. 2007, 15:52

mais moi il n'y a pas de boutons submit.
Le changement devrait se faire quand on sélectionne qq chose dans le menu déroulant.
et même avec disabled, aucun changement.

27 juil. 2007, 15:55

mais moi il n'y a pas de boutons submit.
Le changement devrait se faire quand on sélectionne qq chose dans le menu déroulant.
et même avec disabled, aucun changement.

Je veux bien mais avec le code que je t'ai donné, cela dezvrait être facile maintenant, as-tu une erreur à nous montrer???

30 juil. 2007, 08:44

J'ai réussi en potassant ce weekend.

Voilà donc ma fonction qui permet de griser le contenu de ma puce

Code : Tout sélectionner

function cacher() {
   if (document.form.group[1].selected==true) {   
      var critInputs = document.getElementById('criteria').getElementsByTagName('input');
      document.getElementById('criteria').style.color= '#777777';
      for ( var i = 0 ; i < critInputs.length ; i++ ) {
        critInputs[i].disabled=true;        
        //alert (critInputs[i]);
        //break;
      }
   }
   else {      
      document.getElementById('criteria').style.color= '#000000';
      var critInputs = document.getElementById('criteria').getElementsByTagName('input');
      for ( var i = 0 ; i < critInputs.length ; i++ )  {
        critInputs[i].disabled=false;
      }
   }
}

Afficher le contenu d'une puce <li> en fonction d'un menu déroulant

Qui est en ligne