jQuery: Wird ein div angezeigt, wenn eine spezifische <select> Option ausgewählt ist?

Question

Ich arbeite an der Adress-Seite für einen Einkaufswagen. Es gibt 2 <select> Boxen, eine für Land, eine für Region.

Es sind 6 Standardländer verfügbar, andernfalls muss der Benutzer "Anderes Land" auswählen. Die <option> Elemente haben alle einen numerischen Wert - Anderes Land ist 241. Was ich tun muss, ist die Region <select> auszublenden, wenn der Benutzer Anderes Land auswählt und auch ein Textfeld anzeigt.

Jede Hilfe VIEL geschätzt!

Answer 1

Sie müssen eine Funktion an die Auswahlliste binden, so dass Ihre Funktion bei der Änderung entscheidet, ob der Div angezeigt werden soll. So etwas ( ungeprüft, hoffentlich syntaktisch geschlossen). Hier ist ein live example.

$(document).ready(function() { 
    $('#YourSelectList').bind('change', function (e) { 
    if($('#YourSelectList').val() == 241) { 
     $('#OtherDiv').show(); 
    } 
    else{ 
     $('#OtherDiv').hide(); 
    }   
    }); 
}); 

Answer 2

Es ist das gleiche Prinzip wie this question. Sie müssen nur die Änderung an der Auswahl verbinden, überprüfen Sie die val() und hide()/show() der Div.

Answer 3

Meiner Meinung nach brauchen Sie jQuery nicht wirklich dafür.

Dieser einfache JavaScript-Code wird es tun:

document.getElementById('country_id').onchange = function() 
{ 
    if (this.options[this.selectedIndex].value == 241) { 
     document.getElementById('region_id').style.display = 'block'; 
    } else { 
     document.getElementById('region_id').style.display = 'none'; 
    } 
} 

value funktioniert bei den meisten Browsern, aber ja, für älteren Browser benötigen Sie select.options[select.selectedIndex].value. Ich habe mein Skript aktualisiert.