how to change input-text backround-image with jquery

Question

Here's that placeholder event based on select-dropdown:

$('#A').change(function () {
    var k = $(this).val();
    if (k == 1) {
         $("#B_input-text").attr("placeholder", "this").placeholder();
    }else if (k == 2) {
        $("#B_input-text").attr("placeholder", "this too").placeholder();

This changes placeholders based on some #B select menu. My question is, how do i make these change backround-image ?

Please note, this is not a div, but an input-text tag.

Answer 1

You have to use css function.

$("#B_input-text")
.attr("placeholder", "this")
.placeholder()
.css('backgroundImage', 'url("path/to/image/here")');

---

$("#B_input-text")
.attr("placeholder", "this too")
.placeholder()
.css('backgroundImage', 'url("path/to/image/here")');

---

You just need to pass a object with your desired css properies it it.

var backgroundCss = {
    'backgroundImage': 'url("path/to/image/here")',
    'backgroundRepeat': 'no-repeat',
    'backgroundPosition': '50% 50%',
  };
$("#B_input-text").css(backgroundCss);

Answer 2

Check here DEMO http://jsfiddle.net/yeyene/Kve8L/1/

Create css class for new background, and use jquery removeClass and addClass

You can add in any other properties in the class.

$('#A').change(function () {
    var k = $(this).val();
    if (k == 1) {
        $("input#B_input-text")
            .removeClass('old_bg').addClass('new_bg')
            .attr("placeholder", "I am blue background image and other background properties").placeholder();

    } else if (k == 2) {
        $("input#B_input-text")
            .removeClass('new_bg').addClass('old_bg')
            .attr("placeholder", "this too").placeholder();
    }
});