Kombinieren Sie mehrere einfache jQuery-Funktionen

Question

Ich habe ein Formular mit mehreren Dropdown-Boxen.

Wenn der Benutzer "Andere" aus dem Dropdown-Menü auswählt, wird ein anderes div mit einem Eingabefeld nach unten verschoben.

Das Problem ist, dass ich 20+ Dropdown-Boxen so habe. Kann ich nur eine Funktion erstellen, um die zugehörige auszulösen?

<div class="container"> 
    <div> 
     <select id="option1" name="city"> 
      <option value="">Please Choose</option> 
      <option value="Other">Other</option> 
      <option value="London">London</option> 
     </select> 
    </div> 

    <div id="box1"> 
     <input type="text" name="city-other"> 
    </div> 
</div> 

<div class="container"> 
    <div> 
     <select id="option2" name="color"> 
      <option value="">Please Choose</option> 
      <option value="Other">Other</option> 
      <option value="Red">Red</option> 
     </select> 
    </div> 

    <div id="box2"> 
     <input type="text" name="color-other"> 
    </div> 
</div> 

Und meine jQuery-Code:

Hier mein html ist

$("#box1").hide(); 
$('#option1').on('change', function() { 
    if (this.value == 'Other') 
    { 
     $("#box1").slideDown("slow"); 
    } else { 
     $("#box1").slideUp("slow"); 
    } 
}); 

$("#box2").hide(); 
$('#option2').on('change', function() { 
    if (this.value == 'Other') 
    { 
     $("#box2").slideDown("slow"); 
    } else { 
     $("#box2").slideUp("slow"); 
    } 
}); 

Answer 1

Demo: http://jsfiddle.net/fn5ac1f7/

$(function() { 
    $(".box").hide(); 
    $('.option').on('change', function() { 
     var parent = $(this).parent().parent(); 
     var children=$(parent).children()[1]; 

     if (this.value == 'Other') 
     { 
      $(children).slideDown("slow"); 
     } else { 
      $(children).slideUp("slow"); 
     } 
    }); 
}); 

Answer 2

Verwenden Sie Klassen statt IDs und Klasse sie mögen:

$('.option').on('change', function() { 
    if (this.value == 'Other') 
    { 
     $(this).slideDown("slow"); 
    } else { 
     $(this).slideUp("slow"); 
    } 
}); 

Edit:
To Verstecken Sie die Box, Sie sollten die ID der Auswahl eingeben (innerhalb der Änderung Funktion) durch das:

var this_id = $(this)[0].id; 
this_id = this_id.split('option')[1]; //get the input id 
$("#box" + this_id).hide(); //hide box with same id 

Answer 3

nur zum Spaß Demo https://jsfiddle.net/mtffje50/

$(function() { 
    // hide all div with id starting with "box" 
    $("div[id^='box']").hide(); 
    // observe all select with id starting with "option" 
    $("select[id^='option']").on('change', function() { 
     // do the trick here... 
     var name = this.name.toLowerCase() + '-other'; 
     var $parent = $("input[name='" + name + "']").parent().parent(); 
     if (this.value.toLowerCase() == 'other') { 
      $parent.slideDown("slow"); 
     } else { 
      $parent.slideUp("slow"); 
     } 
    }); 
}); 

Answer 4

Verwenden Sie Klassen

$(".box").slideUp(); 
$('.option').on('change', function() { 
var parent = $($(this).parent()).parent(); 
var children=$(parent).children()[1]; 

    if (this.value == 'Other') { 
    $(children).slideDown("slow"); 
    } else { 
    $(children).slideUp("slow"); 
    } 
});