Изменить фон Div от выбора

Question

Я сделал следующее, что работает, хорошо.Это меняет фон Div onSelectChange из выпадающего списка.Я уверен, что есть лучший способ.Кто-нибудь может порекомендовать?

Спасибо за внимание.

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

Answer 1

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

Answer 2

Я бы рекомендовал использовать стили CSS вместо вызова метода css.Ваш javascript будет выглядеть намного разумнее,

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

    }

});

При использовании приведенного выше кода вам придется использовать value s элементов option, чтобы быть классами css.Таким образом, опция пустого значения должна иметь значение не enpty, и они не должны иметь пробелов (- в порядке).

Тогда вы можете использовать некоторые css, такие как:

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

// ...

Я не проверял это, но вы поняли идею.Если у вас есть какие-либо сомнения, дайте мне знать.Буду рад уточнить:)

Answer 3

Я мало знаю jquery, не использовал его.Но я знаю, что вы слишком много раз повторяете свой код, надеюсь, это поможет

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