Wählen Sie für Javascript Dropdown

Also das ist das erste mal, ich habe versucht Javascript. Ich bin im wesentlichen versucht, um einzigartige DIV basiert auf der ausgewählte Wert in eine dropdown-box. Ich habe es, um zu zeigen, das DIV ist aber die Werte nicht ändern, basierend auf was ausgewählt ist. Hier ist, was ich habe, so weit:

jsfiddle

Wie Sie sehen können, wenn Sie $200.000 Reichweite ist, wählen Sie " ich möchte zu produzieren, fester Wert ist, habe ich bereits berechnet. Ich war neugierig zu sehen, ob es einen switch-oder case-select-Anweisung ich konnte irgendwie produzieren ändern die DIV ' s auf der Grundlage der tatsächlichen-option auf dem dropdown-Menü. Alle Zeiger in die richtige Richtung würde sehr geschätzt werden.

Sollten Sie erwägen, die Verwendung von jQuery. Sie können dies auch tun, in ein paar Zeilen code durch die Verwendung von Klassennamen anstelle der einzelnen IDs.
Ich habe keine Ahnung, wie Sie gehen sogar über die Verwendung von jQuery
Ich habe geschrieben ein Beispiel.

InformationsquelleAutor smada | 2012-10-03

  1. 1

    Wenn Sie nicht wollen, um jQuery verwenden, könnten Sie versuchen, schalten Sie das auswählen und setzen der innerHTML-von value1, value2, value3

        switch(document.getElementById('mySelect').value)
{
    case '0': 
        document.getElementById('value1').innerHTML ='Principal and Interest only: $898';
        document.getElementById('value2').innerHTML = 'Estimated total monthly payment: $1,098';
        document.getElementById('value3').innerHTML ='VA loan payment:';    
        break;   
    case '1': 
        document.getElementById('value1').innerHTML ='Principal and Interest only: $998';
        document.getElementById('value2').innerHTML = 'Estimated total monthly payment: $2,098';
        document.getElementById('value3').innerHTML ='VA loan payment: $25';    
        break;          
    etc...
}
    Schön. Das ist genau das, was ich suchte Stuart. Ich wusste, es war ein Weg, um es zu wechseln, aber ich wusste nicht, müssten Sie die Kapseln das ganze getelementbyid mit dem Schalter. Ich Schätze Ihre Zeit und Geduld.

    InformationsquelleAutor Stuart Feldt

  2. 0

    Hier ist, wie können Sie tun dies unter Verwendung von jQuery:

    <select id="mySelect" onchange="showhide(this)">
    <option value="">Desired Home Price:</option>
    <!-- the option values are suffixes for the elements to show -->
    <option value="0">$200,000</option>
    <option value="1">$175,000</option>
    <option value="2">$150,000</option>
    <option value="3">$125,000</option>
    <option value="4">$100,000</option>
    <option value="5">$75,000</option>
    <option value="6">$50,000</option>
</select>

<div class="answer0 answers" style="width:200px;height:200px;display:none">
<div id="value1">Principal and Interest only: $898</div> 
<div id="value2">Estimated total monthly payment: $1,098</div>
<div id="value3">VA loan payment:</div>
<div id="value4">Another field:</div>
</div>

<div class="answer1 answers" style="width:200px;height:200px;display:none">
<div id="value1a">Principal and Interest only: $898.00</div> 
<div id="value2a">Estimated total monthly payment: $1,098.00</div>
<div id="value3a">VA loan payment:</div>
<div id="value4a">Another field:</div>
</div>



<script type="text/javascript">

function showhide(id) {
    var mySel = $(id).val()
    $('.answers').hide()  
    $('.answer'+mySel).show()  
}

</script>

    Vielen, vielen Dank! Dies ist definitiv geladen großartig in jsfiddle. Noch eine kurze Frage, wie rufe ich jQuery für die Seite?
    Sie müssen es in Ihrem KOPF: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    In jsfiddle können Sie jQuery auf der linken Seite im Menü.
    Ya ich sah definitiv der dropdown jQuery auf der Seite von jsfiddle. Ich war nur nicht sicher, wie Sie es aufrufen, über meine Seite auf HTML. Vielen Dank für all die Hilfe/Unterstützung Diodeus.
    Also, wenn es um die Umsetzung dieses code aus jfiddle zu dreamweaver, es hat nicht geladen. Jemand irgendwelche Ideen? jsfiddle.net/fc3BX

    InformationsquelleAutor Diodeus - James MacFarlane

Schreibe einen Kommentar