एकाधिक सरल jQuery फ़ंक्शंस को जोड़ें

Question

मेरे पास कई ड्रॉपडाउन बॉक्स हैं।

यदि उपयोगकर्ता ड्रॉपडाउन मेनू से "अन्य" चुनते हैं, तो इनपुट फ़ील्ड वाला दूसरा div नीचे स्लाइड हो जाएगा।

समस्या यह है कि मेरे पास 20+ ड्रॉपडाउन बॉक्स हैं। क्या मैं संबंधित एक को ट्रिगर करने के लिए केवल 1 फ़ंक्शन बना सकता हूं?

<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> 

और मेरे jQuery कोड:

यहाँ मेरी एचटीएमएल है

$("#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

डेमो: 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

उपयोग के बजाय आईडी और वर्ग वर्गों उन्हें पसंद:

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

संपादित करें:
करने के लिए बॉक्स को छुपाएं, आपको चुनिंदा इनपुट की आईडी प्राप्त करनी चाहिए (परिवर्तन के अंदर समारोह) यह द्वारा:

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

सिर्फ मनोरंजन के डेमो के लिए 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

उपयोग कक्षाएं

$(".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"); 
    } 
});