Отображение содержимого на основе опции, нажатой в поле выбора A

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.twelve или span.thirteen на этот раз), на основании которого option щелкают/выбрано select коробка. Лучшее, что мне удалось, это заставить всех трех сразу появиться.

Answer 1

Ваш код не должен быть длиннее, чем это

$(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/

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;  
     } 
    });   

Рабочий пример here

Answer 3

Ваш оригинальный код сломан, i've create a fiddle that fixes it.

Ваша проблема заключалась в том, что вы исчезали, ваш селектор выбирал все из них, видимые или нет, а затем показывал ВСЕ из них, когда они исчезали. Таким образом, всегда отображается последний (самый верхний).

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

Кроме того, вам необходимо указать, как вы пытаетесь получить раскрывающийся список. Вы предоставили только старый код и ничего больше.