Comment faire pour afficher/masquer les divs quand sélectionnez options utilisateur clique sur

J'ai une boîte de sélection et souhaitez afficher un texte d'aide caché dans un div lorsque vous cliquez sur une option:

<select  onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

<div id="help1" style=visibility:hidden>help text 1</div>
<div id="help2" style=visibility:hidden>help text 2</div>

<script type="text/javascript">
    function optionCheck(){
        var option = document.getElementById("options").value;
        if(option == "1"){
            document.getElementById("help1").style.visibility ="visible";
            document.getElementById("help2").style.visibility ="hidden";
        }
        if(option == "2"){
            document.getElementById("help2").style.visibility ="visible";
            document.getElementById("help1").style.visibility ="hidden";
        }
    }
</script>

Comment puis-je créer une simple boucle donc je n'ai pas d'écrire "si" énoncés pour chaque option?

 document.getElementById(option).style.visibility ="visible";

n'est pas le javascript et moi de ne pas obtenir le long bien 😉

Aussi, est-il un moyen simple pour masquer toutes les autres divs lorsqu'une option est sélectionnée?

tout d'abord, ce n'est pas une bonne pratique pour définir vos événements dans votre code html. Ces jours, il ya de bonnes solutions de rechange disponibles (tous les définissant dans votre javascript) et cela repose sur une chaîne de prise en evaled, et c'est juste pas bon.
Ensuite, vous devez placer des guillemets autour de visibility:hidden. Il peut ne pas casser votre code en ce moment, mais ce n'est aucune raison de le faire comme cela. Vous avez juste ne faut pas utiliser les propriétés de style, mais nous ferons semblant de ne pas voir que.
Sont tous de vos options va être numérotées et la div sera donné id de "help_" où le trait de soulignement est un nombre correspondant?
oui, ils sont tous comptés comme ça

OriginalL'auteur uwe | 2012-04-21

html javascript

Voici comment je ferais:

D'abord, je suis assez paresseux, et je ne veux pas de type style="visibility: hidden;" sur chacun de ces divs. Il est plus facile de cacher tout cela à la fois avec les CSS:

HTML:

<select  onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>

<div id="help-wrapper">
  <div id="help1">help text 1</div>
  <div id="help2">help text 2</div>
</div>

CSS:

#help-wrapper div {
  visibility: hidden;
}

/* It's better to use a class to highlight the selection,
   in case you feel like adding more styles later (like a border or something).
 */
.current-help {
  visibility: visible;
}

Nous pouvons maintenant travailler sur le Javascript, un peu plus générique:

function optionCheck()
{
  var i;
  var optionIndex = document.getElementById("options").value;

  var helpWrapper = document.getElementById("help-wrapper");
  var helpDivs = helpWrapper.getElementsByTagName("div");

  //Loop through all the help divs.
  for (i=0; i<helpDivs.length; i++) {
    //Parse out the numeric portion of this help div's id.
    var helpIndex = helpDivs[i].substring[4];

    //If we found our div, highlight it.
    if (helpIndex === optionIndex) {
      helpDivs[i].className = "current-help";
    }
    //Otherwise, we should make sure it's hidden,
    //in case it was the previous selection.
    else {
      helpDivs[i].className = "";
    } 
  }
}

Et qui devrait faire l'affaire!

Si vous avez des questions sur le code ci-dessus, je serais heureux d'y répondre.

helpDiv.style.display = "inline-block"; est également une option. Juste mes deux cents.

OriginalL'auteur Dan M

Je recommande l'utilisation de certaines classes CSS pour masquer/afficher les divs. Puis le JavaScript juste besoin de définir l'attribut de classe pour chaque div.

Cette solution fonctionne toujours si vous sélectionnez plus d'une option.

HTML:

<select onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
</select>

<div id="help1" class="helpText">help text 1</div>
<div id="help2" class="helpText">help text 2</div>

CSS:

/* consider "display: none/block" instead of visibility: hidden/visible
   if you don't want the hidden divs to occupy space */
.helpText {
    visibility: hidden;
}
.helpTextShow {
    visibility: visible;
}

JavaScript:

function optionCheck() {
    var i, len, optionVal, helpDiv,
        selectOptions = document.getElementById("options");

    //loop through the options in case there
    //are multiple selected values
    for (i = 0, len = selectOptions.options.length; i < len; i++) {

        //get the selected option value
        optionVal = selectOptions.options[i].value;

        //find the corresponding help div
        helpDiv = document.getElementById("help" + optionVal);

        //move on if we didn't find one
        if (!helpDiv) { continue; }

        //set CSS classes to show/hide help div
        if (selectOptions.options[i].selected) {
            helpDiv.className = "helpText helpTextShow";
        } else {
            helpDiv.className = "helpText";
        }
    }    
}

//alternative method of binding the onchange handler, merely a suggestion
//document.getElementById("options").onchange = optionCheck;

Ici est un jsFiddle à démontrer: http://jsfiddle.net/willslab/3N9pm/9/

J'espère que ça aide!

Hmm, je n'ai pas de compte pour la sélection multiple. Je vais jeter un oeil à ce.
Ok, après quelques essais, cela devrait le faire.

OriginalL'auteur Will Klein

Consultez l'modifié le code HTML et JavaScript:

HTML:

<div id="help1" style="display:none">help text 1</div>
<div id="help2" style="display:none">help text 2</div>

JAVASCRIPT:

function optionCheck()
{
    var option = document.getElementById("options").value;
    if(option == "1"){
        document.getElementById("help1").style.display ="";
        document.getElementById("help2").style.display ="none";
    }
    if(option == "2"){
        document.getElementById("help2").style.display ="";
        document.getElementById("help1").style.display ="none";
    }
}

Cela ne fonctionne pas pour plusieurs options sélectionnées.

OriginalL'auteur Sukhjeevan

son meilleur, pour envelopper les styles css avec des guillemets:

  <div id="help1" style="visibility:hidden">help text 1</div>
  <div id="help2" style="visibility:hidden">help text 2</div>


function optionCheck(){
        var option = document.getElementById("options").value;
        document.getElementById("help" + option).style.visibility ="visible";
        }
}

OriginalL'auteur undefined

0

Au lieu de getElementById(option), essayez quelque chose comme getElementById("help" + option).

Qu'est-ce que getElementById("help" + option)?
L'affiche dit: document.getElementById(option).style.visibility ="visible"; ne fonctionne pas. En partie, au moins, c'est parce que option est "1" ou "2", alors que l'IDENTIFIANT de l'élément est "help1" ou "help2". Donc, essayez de "help" + option plutôt que de simplement option.
cool, cela a fonctionné. Comment puis-je masquer tous les autres divs lorsque l'on a été sélectionné?
Pseudo-code (je ne suis pas totalement javascriptish sur le dessus de ma tête): for (i = 1; i <= numOptions; ++i) { if (i == option) { visibilityValue = "visible"; } else { visibilityValue = "hidden"; } document.getElementById("help" + option).style.visibility = visibilityValue; } ... et sans doute que vous avez précédemment mis "numOptions" pour 2 (ou quelle que soit la valeur appropriée est)

OriginalL'auteur zognortz

vous pouvez essayer avec l'opérateur ternaire en javascript:

document.getElementById("options").value == 1?(document.getElementById("help1").style.visibility ="visible",document.getElementById("help2").style.visibility ="hidden"):(document.getElementById("help2").style.visibility ="visible",document.getElementById("help1").style.visibility ="hidden");

Cela permettra d'éviter les multiples si les déclarations

OriginalL'auteur UVM

Vous devez vous connecter pour publier un commentaire.