Ich habe dynamische Felder durch jquery generiert. Ich kann diese Felder über einen Auswahlfunktionsauslöser .change anzeigen. Jedes Auswahlfeld verfügt über drei Optionen: Biology, Calculus und Others-Not listed. Bei Auswahl von Others-not listed mit dem Wert 3 zeigt die Funktion ein verstecktes Div an. Mein Problem ist, dass wenn zwei Auswahlfelder vorhanden sind und in einem die Option Others-not listed ausgewählt ist, das versteckte Div für alle anderen Auswahlfelder angezeigt wird. Ich möchte nur dieses versteckte Div für das jeweilige Auswahlfeld anzeigen. JSFIDDLE

$(document).ready(function() {
    $('select').change(function() {
        var option = $(this).val();
        showFields(option);
        return false;
    });
    function showFields(option){ 

        var content = '';
        for (var i = 1; i <= option; i++){
            content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"'
            content += '<option value="1">Biology</option>'; content += '<option value="2">Calculus</option>'; content += '<option value="3">Other - Not Listed</option>'; '"';

            content += '</select><div class="hideNewCourse" style="display:none;"><label for="newCourse_'+i+'">Add Course Name to List:</label><input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/></div></br></div>';

            $(document).on('change',"#coursename_"+i, function(){
                if ($(this).val() == "3"){
                    $(".hideNewCourse").show();    
                }else{
                    $(".hideNewCourse").hide();
                }
            });

        }
        $('#course_catalog').html(content);
    }
});
2
techAddict82 10 Dez. 2013 im 00:38

4 Antworten

Beste Antwort

Sie delegieren sowieso die Ereignisse. Anstatt das Ereignis speziell an jedes Element zu binden, verwenden Sie einfach . Das Attribut beginnt mit Auswahl.

$(document).on('change',"#coursename_"+i, function(){

Kann geändert werden zu

$(document).on('change',"[id^=coursename_]", function() {

Und verschieben Sie es aus der showFields-Methode

Um das spezifische Element, das den Container enthält, ein- und auszublenden, verwenden Sie eine Mischung aus dem nächsten, der zum übergeordneten Element gelangt, und suchen Sie dann das hideContainer div für den entsprechenden Block.

$(".hideNewCourse").show();  

Wird dann zu ändern

$(this).closest('div').find(".hideNewCourse")

Geige prüfen

3
Sushanth -- 9 Dez. 2013 im 20:55
$(".hideNewCourse").show();  

Das Obige repräsentiert alle Elemente mit dieser Klasse.

Man muss selektiv sein wie

$(this).parent().find(".hideNewCourse").show();    

Dann,

$(document).on('change',"#coursename_"+i, function(){
                if ($(this).val() == "3"){
                    $(this).parent().find(".hideNewCourse").show();    
                }else{
                    $(this).parent().find(".hideNewCourse").hide();
                }
            });

Geige

2
Praveen 9 Dez. 2013 im 20:42

Ändern Sie Ihren Code für die ausgewählten Felder in:

if ($(this).val() == "3") {
    $(this).parent().find(".hideNewCourse").show();
} else {
    $(this).parent().find(".hideNewCourse").hide();
}

jsFiddle-Beispiel

In Ihrem Code zeigt oder versteckt $(".hideNewCourse") alle Elemente dieser Klasse. Mit $(this).parent().find(".hideNewCourse") wählen Sie nur das Element relativ zu der Auswahl aus, die geändert wurde.

3
j08691 9 Dez. 2013 im 20:42

Versuchen Sie, die Funktion .next() zu verwenden, damit statt aller nur das nächste Objekt erfasst wird ::

Also stattdessen:

    $(".hideNewCourse").show();  

Mach das:

     $(this).next(".hideNewCourse").show(); 

Und Sie würden das gleiche für verstecken tun:

     $(this).next(".hideNewCourse").hide(); 
1
Control Freak 9 Dez. 2013 im 20:42