javascript ändern, div basierend auf dropdown

Habe ich eine dropdown-Liste mit 2 Optionen:

<select name="list" size="1">
   <option value=1>Option 1</option>
   <option value=2>Option 2</option>
</select>

Und ich setzen will <span id=tag></span> zum anzeigen verschiedener text-je nachdem, welche option markiert ist, in der dropdown-Liste. Wie kann ich dies tun?

<span=tag> ist kein Gültiger HTML-Code. Versuchen <span id="tag">.

InformationsquelleAutor user1022585 | 2012-03-02

  1. 1

    Gut, die Frage ist ziemlich vage, aber im Allgemeinen würden Sie so etwas tun:

    Html:

    <select id="mySelect" name="list" size="1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
</select>
<span id="tag"></span>

    Javascript:

    //cache the select and span elements
var mySelect = document.getElementById("mySelect"),
    tag = document.getElementById("tag");

//when it changes
mySelect.onchange = function() {
       //change the tag innerHTML checking the selected value of the select
       tag.innerHTML = mySelect.value === "1" ? "some text" : "some other text";
}

    Könnte man ändern, den ternären operator (? :) für ein paar if-Anweisungen, wenn Sie weitere Bedingungen.

    Beachten Sie, dass ich habe eine Id, die <select>. Vermeiden Sie den caching-Teil, wenn Sie möchten, um die Spannweite jedes mal, wenn die select-änderungen für einige Grund

    wenn die option Werte sind text <option value=one> es scheint nicht zu funktionieren. Oder mache ich etwas dummes?
    Versuchen Sie es mit Anführungszeichen <option value="one">text</option> und dann denken Sie daran, ändern Sie den Wert in der onchange Methode. Es sollte funktionieren, es ist nicht nur zahlen
    werfen Sie einen Blick auf diese: jsfiddle.net/P96y8

    InformationsquelleAutor nicosantangelo

  2. 0

    Können Sie es mit onchange-event-handler auf Ihrem <select>:

    <select name="list" id="list">
  <option value="1">Option 1</option>
  <option value="1">Option 1</option>
</select>

<span id="tag"></span>

<script>
  //Get references to the objects you need (<select> and <span>)
  var list = document.getElementById('list');
  var tag = document.getElementById('tag');

  //When the list value changes, set the innerHTML of the <span>
  list.onchange = function() {
    tag.innerHTML = this.value;
  };
</script>

    Beachten Sie in der obigen, dass ich Hinzugefügt habe, id-Attribute, um die beiden select-und span-Elemente. Dies ermöglicht es mir, einfach einen Verweis, um Sie in Javascript.

    Ist es auch wichtig, für mein Beispiel, dass das Skript ausgeführt wird, nachdem die Elemente dargestellt werden, da sonst die document.getElementById Anruf nicht zurückkehren, einen Verweis zu Ihnen. Könnten Sie umgehen diese Einschränkung, indem verschieben Sie das Skript in ein Fenster.onload hf.

    Hier ein einfaches Beispiel, dass es funktioniert.

    Wenn Sie wollte, kopieren Sie einen Teil meiner Antwort, zumindest konnte Sie ein wenig mehr kreativ mit den Worten 😛 (ich bin nicht verrückt oder nichts)
    komisch - ich habe nicht sehen Ihre Antwort, auch wenn ich Sie mir geschrieben. Irgendwie seltsam, wie nah wir kamen in schreiben, eh?
    Great minds think alike, oder Zufall...wahrscheinlich Zufall.

    InformationsquelleAutor Pat

Schreibe einen Kommentar