CODEWITHSUNDEEP
javascriptjquery
Justin
Justin

Reputation: 1329

Display Content based On Option Clicked in A Select Box

I spent several hours on this and couldn't find a solution that worked, so I'm turning to you :) As you can see from this fiddle (http://jsfiddle.net/PPcgE/), I was able to target the radio buttons by click with this code:

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

I'm trying to do exactly the same thing (displaying either span.eleven, span.twelve or span.thirteen this time) based on which option is clicked/selected in the select box. The best I've been able to manage is to get all three to appear at once.

Upvotes: 0

Views: 262

Answers (3)

php-dev
php-dev

Reputation: 7156

Your code shouldn't be longer than this

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

Upvotes: 0

erikrunia
erikrunia

Reputation: 2383

Your original code is broken, i've create a fiddle that fixes it.

Your problem was when you were fading out, your selector was selecting all of them, visible or not, and then showing ALL of them while fading out.. thus always showing the last one (topmost).

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

Beyond that you need to provide your attempt at how you tried to get the dropdown box working. You only provided the old code and nothing more.

Upvotes: 1

Nouphal.M
Nouphal.M

Reputation: 6344

Try

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

Working example here

Upvotes: 0

Related Questions