How can I use a variable in a jQuery attribute selector?

Question

I have a selectbox with several options - each of these option values correspond to a "value" attribute on some images below. The functionality I want is when selectbox value is changed the img with the corresponding value is highlighted with a red border. Here is the code:

function assignValue() {
  selectboxvalue = $('#Box_style').val() ;
  $('.tabContent img[value="+selectboxvalue+"]').css({border: '1px solid #c10000'});
}

$('#Box_style').change(assignValue);

Looking around at the jquery documentation (http://api.jquery.com/attribute-equals-selector), apparently this should work...

Any help would be appreciated, Thank you!

I think your problem is simply that you mixed up ' and ". — SOFe
– SOFe, Commented Jul 9, 2017 at 7:05
@kinsey This is a failure to understand basic string operations, not the functionality of jQuery. It would be a good idea for you to try to understand strings and concatenation. The actually What and Why of the problem, not the How. If you are programming in a text editor an IDE with syntax highlighting (and understanding why things highlight the way they do) would help a bunch — Marie
– Marie, Commented Aug 2, 2018 at 14:54

c-smile · Accepted Answer · 2018-08-02 14:44:29Z

45

Prior to jQuery 1.7

The following will work:

$('.tabContent img[value='+selectboxvalue+']').css({border: '1px solid #c10000'});

jQuery 1.7 and later

In 1.7 jQuery changed the syntax to require the attributes to have quotation around the value:

$('.tabContent img[value="'+selectboxvalue+'"]').css({border: '1px solid #c10000'});

edited Aug 2, 2018 at 14:44

answered May 25, 2011 at 21:26

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2011-05-25 21:26:57Z

7

Quotes are messed up:

  $('.tabContent img[value="'+selectboxvalue+'"]').css({border: '1px solid #c10000'});

answered May 25, 2011 at 21:26

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Joker82 · Accepted Answer · 2017-04-21 17:59:41Z

1

To the above, it no longer works as mentioned above (, though it might also be only my code). The single quotation messes up the code. The following code works

As of jQuery 3.2.1 and later

$("#clickmap a[gruppe="+gruppeId+"]").children("path").addClass('lastClicked');

answered Apr 21, 2017 at 17:59

Joker82

112 bronze badges

Collectives™ on Stack Overflow

How can I use a variable in a jQuery attribute selector?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related