Kết hợp nhiều hàm jQuery đơn giản

Question

Tôi có một biểu mẫu với một số hộp thả xuống.

Nếu người dùng chọn "Khác" từ trình đơn thả xuống, một div khác có trường nhập sẽ trượt xuống.

Vấn đề là tôi có 20 hộp thả xuống như thế. Tôi có thể tạo chỉ 1 chức năng để kích hoạt chức năng liên quan không?

Dưới đây là html của tôi:

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

Và mã jQuery của tôi:

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

Sử dụng các lớp học thay vì id và class họ thích:

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

Edit:
Để ẩn hộp, bạn sẽ nhận được id của đầu vào được chọn (bên trong thay đổi chức năng) của thành viên này:

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

chỉ để cho vui bản 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

Sử dụng lớp

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