根据选择框中单击的选项显示内容

Question

我花了几个小时来解决这个问题，但找不到有效的解决方案，所以我转向您：)正如您从该小提琴（ http://jsfiddle.net/PPcgE/ ）所看到的，单击带有以下代码的单选按钮：

$("input[type='radio']").click(function (e) {
    if ($('.cos-cond').is(":visible")) {
        e.preventDefault();
    } else {
        var clicked = $(this).attr('title');
        var cls = [$('.one'), $('.two'), $('.three'), $('.four'), $('.five'), $('.six'), $('.seven'), $('.eight'), $('.nine'), $('.ten')];
        for (i = 0; i < cls.length; i++) {
            if (cls[i].attr('title') === clicked) {
                cls[i].fadeIn('fast', function(){
                    setTimeout(function(){
                        $('.cos-cond').fadeOut('slow');}, 5000);
                });
            } 
        }
    }
});

我试图做完全相同的事情（ span.eleven显示span.eleven ， span.twelve或span.thirteen ），这取决于在select框中单击/选择了哪个option 。 我能够管理的最好的方法是让这三个函数同时出现。

Answer 1

您的原始代码已损坏， 我创建了一个小提琴来修复它。

您的问题是，当您正在淡出时，选择器会选择所有可见（或不可见）的对象，然后在淡出时显示所有的对象。因此总是显示最后一个（最上面的）。

if (cls[i].attr('title') === clicked) {
    cls[i].fadeIn('fast', function(){
        setTimeout(function(){
            $('.cos-cond:visible').fadeOut('slow');}, 5000);
    });
} 

除此之外，您还需要尝试如何使下拉框正常工作。 您只提供了旧代码，仅此而已。

Answer 2

尝试

$(".emf-hide").change(function(e){
        var val = $(".emf-hide option:selected").val();
        $('.work-cond').hide();
        switch(val){
        case 'Like New - No Functional Problems':
              $('.eleven').show();    
         break;       
         case 'Minor Functional Problems':
              $('.twelve').show();    
         break;       
         case 'Non-functional':
              $('.thirteen').show();    
         break;       
        }
    });        

这里的工作示例

Answer 3

您的代码不应超过此长度

$(document).ready(function(){
    $("input[type='radio']").click(function (e) {
        $('.cos-cond, .work-cond').hide();
        var clicked = $(this).attr('title');
        $('span.cos-cond[title=' + clicked + ']').fadeIn(300);
    });
    $("select").change(function (e) {
        $('.cos-cond, .work-cond').hide();
        var value = $(this).val();
        var title = $('option[value="' + value + '"]', this).attr('title');
        $('span.work-cond.' + title).fadeIn(300);
});
});

http://jsfiddle.net/PPcgE/5/