Change Background Of Div From Select

I have made the following, which works, fine. It changes the background of a Div onSelectChange from a dropdown. I’m sure there is abetter way. Could anybody recommend? Thank you

Solution 1:

$(document).ready(function() {

    $("#QuoteRequiredFor").change(onSelectChange);

});

functiononSelectChange() {
    var selected = $("#QuoteRequiredFor option:selected");
    var output = ""; 
    var cssValues = newArray();
    cssValues['Factoring'] = 'factoring.jpg';
    cssValues['Mortgage'] = 'Mortgage.jpg';  // same as for other valuesif(selected.val() == ''){
    output = "You Selected " + selected.text();    
    $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg)');
    }
    else{
    output = "You Selected " + selected.text();
    $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/'+cssValues[selected.val()]+')');
    } 

   $("#output").html(output);
}   

Solution 2:

I don't know jquery much, haven't used it. But what i do know is that you are repeating your code way too much, i hope this helps

$(document).ready(function(){

$("#QuoteRequiredFor").change(onSelectChange);
});

functiononSelectChange(){
    var selected = $("#QuoteRequiredFor option:selected");      
    var url;
      if(selected.val() == '') { url = '/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg';}
      elseif (selected.val() == 'Factoring' ){ url = '/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg'; }
      elseif (selected.val() == 'Mortgage' ){ url = '/Finance-Quote/FinanceQuoteForm/Images/Mortgage.jpg');}
      elseif (selected.val() == 'Stock' ){ url = '/Finance-Quote/FinanceQuoteForm/Images/stock.jpg'); }
      elseif (selected.val() == 'Asset' ){ url = '/Finance-Quote/FinanceQuoteForm/Images/asset.jpg'); }
      elseif (selected.val() == 'Invoice discounting' ){ url = '/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg'); }

    $('#FinanceQuoteForm').css('background', 'url('+url+')');
    $("#output") .html("You Selected " + selected.text());
}

Solution 3:

I'd recommend using css styles instead of calling the css method. Your javascript will look much much saner,

$(function () {
    $("#QuoteRequiredFor").change(onSelectChange);

    var lastClass = '';
    functiononSelectChange() {

        var selectedVal = $(this).val(), output = 'You selected ' + selectedVal;

        $(this).removeClass(lastClass).addClass(selectedVal);
        lastClass = selectedVal;

        $("#output").html(output);

    }

});

When using the above code, you'll have use the use the values of the option elements to be the css classes. So, the empty value option should have a non-enpty value, and they should not have spaces (- are ok).

Then you can use some css like the following

.factoring {
    background: url("/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg");
}

// ...

I haven't tested it but you get the idea. If you have any doubt, let me know. I'd be happy to clarify :)