0

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 for looking.

$(document).ready(function() {

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

});

function onSelectChange() {
    var selected = $("#QuoteRequiredFor option:selected");
    var output = "";
    if (selected.val() == '') {
        output = "You Selected " + selected.text();
        $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg)');
    };
    if (selected.val() == 'Factoring') {
        output = "You Selected " + selected.text();
        $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg)');
    };
    if (selected.val() == 'Mortgage') {
        output = "You Selected " + selected.text();
        $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/Mortgage.jpg)');
    };
    if (selected.val() == 'Stock') {
        output = "You Selected " + selected.text();
        $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/stock.jpg)');
    };
    if (selected.val() == 'Asset') {
        output = "You Selected " + selected.text();
        $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/asset.jpg)');
    };
    if (selected.val() == 'Invoice discounting') {
        output = "You Selected " + selected.text();
        $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg)');
    };

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

3 Answers 3

3
$(document).ready(function() {

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

});

function onSelectChange() {
    var selected = $("#QuoteRequiredFor option:selected");
    var output = ""; 
    var cssValues = new Array();
    cssValues['Factoring'] = 'factoring.jpg';
    cssValues['Mortgage'] = 'Mortgage.jpg';  // same as for other values

    if(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);
}   
3
  • um, small oversight due to inconsistent indentation, you're missing setting output in the else cluase
    – sharat87
    Apr 23, 2011 at 13:57
  • Thank you very much for taking the time. Makes my attempt look clunky.
    – Bocker
    Apr 23, 2011 at 14:16
  • @Bocker : don't forget to accept the best answer(which you think), by clicking on right tick mark, in left
    – Gaurav
    Apr 23, 2011 at 14:18
1

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

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

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

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 = '';
    function onSelectChange() {

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

1
  • Thank you very much for taking the time. Makes my attempt look clunky.
    – Bocker
    Apr 23, 2011 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.