Ein - /ausblenden drop-down, wenn ein radio-button ausgewählt ist

Ich bin völlig neu in Javascript. Ich habe ein Programm, das ich Schreibe, für eine Klasse, die eine form hat. Ich brauche ein drop-down-Menü erscheint mit den Monaten des Jahres, wenn einer der beiden radio-buttons geklickt wird. Ich habe versucht, verschiedene Möglichkeiten, aber ich kann nicht scheinen, um es herauszufinden. Auch werde ich brauchen, um dies zu tun, für wie 6 Felder. Also brauche ich mehr als eine Funktion oder kann ich den gleichen benutzen?

  • Dies ist mein HTML-code.. auch ein kleines Stück der form. Ich weiß nicht, was mit dem Javascript
InformationsquelleAutor Emily | 2011-07-27
  1. 5

    Versuchen Sie dies:

    <script type="text/javascript">
function ChangeDropdowns(value){
    if(value=="radiobuttonYes"){
        document.getElementById('ddlId').style.display='none';
    }else if(value=="radiobuttonNo"){
        document.getElementById('ddlId').style.display='block';
    }
}
</script>

    Wenn alle Felder hängen von der gleichen radio-button-Wert, können Sie die gleiche Funktion durch die übergabe der clientId als parameter und verwenden Sie es in getElementById.

    • Die form ist eine medizinische Typ form. Sie Fragen, ob Sie haben verschiedene Aufnahmen und Dinge wie, dass. Wenn Sie Sie hatten, dann muss ich wissen, wenn das, was der dropdown ist für. Es wird ein drop-down für alle. Ich bin etwas verwirrt.
    InformationsquelleAutor Vinay
  2. 0

    Sieht aus wie Sie mich zu schlagen. Aber, hier ist ein weiteres Beispiel.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>radio example</title>
        <style type="text/css">
            .show { display: block;  }
            .hide { display: none; }
        </style>

        <script type="text/javascript">
            function showSelect() {
                var select = document.getElementById('my_select');
                select.className = 'show';
            }
        </script>
    </head>
    <body>
        <form action="#" method="post">
            <label for="my_radio">Click me</label>
            <input id="my_radio" type="radio" name="options" value="some_value" onclick="showSelect();" />

            <select id="my_select" class="hide">
                <option value="someValue">Some Text</option>
            </select>
        </form>
    </body>
</html>
    InformationsquelleAutor Josh - TechToolbox
  3. 0

    Wenn Sie eine id zuweisen jedes element, das Sie möchten, um zu zeigen/verstecken, dann können Sie verwenden, JavaScript und CSS-anzeigen oder ausblenden der Elemente der Seite.

    Diesen code in den header der HTML-Datei. Beachten Sie, dass die Anzeige wirkt sich auf die Anordnung, im wesentlichen zu entfernen, den Raum, das element nimmt auf der Seite. Sichtbarkeit bewahrt layout, versteckt das element aber halten Sie es an Platz zur Verfügung. Sie verwenden können, je nachdem, welcher Funktion die zu Ihnen passt.

    <script language="javascript" type="text/javascript">
function setVisible(id, visible) {
    var o = document.getElementById(id); //get the element based on it's id

    //if the element exists then set it's visiblity
    if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
    if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}

function setDisplay(id, visible) {
    var o = document.getElementById(id);
    if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
    if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}

</script>

    Hier ist ein Beispiel, was in den Körper. Sie können wählen, um die setVisible-Methode oder die setDisplay Funktion. Auch, möchten Sie vielleicht in Erwägung ziehen, auch andere Hörer von radio-buttons wie onchange, weil der Benutzer nicht brauchen, um die Maus klicken Sie auf ein Optionsfeld, um es zu überprüfen. Sie können die Tastatur verwenden, um Sie als gut, das würde nicht Feuer das onclick-Ereignis.

    <div>
    Radio:
    <input type='radio' name='myradio' value='first' onclick="setVisible('Div1', true); setVisible('Div2', false);" />
    <input type='radio' name='myradio' value='second' onclick="setVisible('Div2', true); setVisible('Div1', false);" />
</div>

<div id='Div1'>
    More form fields here.
</div>

<div id='Div2'>
    More form fields here.
</div>

    Hier ist mein vollständiger code-Beispiel:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function setVisible(id, visible) {
        var o = document.getElementById(id);
        if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
        if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
    }

    function setDisplay(id, visible) {
        var o = document.getElementById(id);
        if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
        if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
    }
    </script>

</head>

<body>

    <div>
        Radio:
        <input type='radio' name='myradio' value='first' onclick="setVisible('Div1', true); setVisible('Div2', false);" />
        <input type='radio' name='myradio' value='second' onclick="setVisible('Div2', true); setVisible('Div1', false);" />
    </div>

    <div id='Div1'>
        More form fields here. 1
    </div>

    <div id='Div2'>
        More form fields here. 2
    </div>

</body>
</html>
    • Ich und es funktioniert nicht. Ich kann klicken Sie einfach auf die radio-buttons, aber absolut nichts passiert.
    • Es könnte sein, dass Sie verwenden die falsche Kennung ändern der Sichtbarkeit oder die Anzeige eines Elements. Ich habe einige code auf meiner Beispiele, um Ihnen zu sagen, wenn das der Fall ist. Außerdem habe ich noch meine volle code-Beispiel. Sie können fügen Sie den vollständigen code in einer Webseite anzeigen in den browser und es läuft (vorausgesetzt, Sie haben JavaScript aktiviert ist).
    • Ihr code wird ausgeführt. Ich brauche zu tun, mehr als einmal, aber mit unterschiedlichen Feldern. Kann ich die gleiche Funktion oder muss ich eine neue Funktion für alle?
    • Sie können die gleiche Funktion, nur ändern Sie den Namen von der ID zum ein-oder ausblenden.
    • was meinst du damit? wie mache ich das?
    • Beachten Sie in der vollständigen code-Beispiel, gibt es zwei div-tags mit den angegebenen IDs: <div id='Div1'> und <div id='Div2'>. Zeigen oder verstecken, finden Sie die ID und rufen Sie die Funktion setVisible-Methode(id des div, true-oder-false-Sicht.) Sie werden wahrscheinlich wollen, um die Funktion aufzurufen, wenn ein Ereignis ausgelöst, wie das onclick-Ereignis an jeden radio-button.

    InformationsquelleAutor James
Schreibe einen Kommentar