Combina più funzioni jQuery semplici

Question

Ho un modulo con più caselle a discesa.

Se l'utente sceglie "Altro" dal menu a discesa, un altro div con un campo di immissione scorrerà verso il basso.

Il problema è che ho 20+ caselle a discesa simili. Posso creare solo 1 funzione per attivare quella correlata?

Ecco il mio html:

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

E il mio codice 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

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

Utilizzare le classi invece di ID e di classe come loro:

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

Edit:
Per nascondi la scatola, dovresti ottenere l'id dell'ingresso select (all'interno della modifica funzione) da questo:

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

solo per divertimento 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

Utilizzare le classi

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