jquery select option not working (by name)

Question

I have the following HTML which defines my selector:

<select name="zoom_cat[]" style="margin-left:15px;"> <option value="-1" selected="selected">All</option> <option value="0">News</option> <option value="1">Publications</option> <option value="2">Services</option> <option value="3">Industries</option> </select>

And I am trying to set the selected option to All (value -1). For some reason this jquery code is having no effect (same option remains selected):

$('input[name="zoom_cat[]"] option[value="-1"]').attr('selected', 'selected');

see stackoverflow.com/questions/1280499/jquery-set-select-index duplicate — Collin Price
– Collin Price, Commented Apr 16, 2012 at 21:53
You're trying to set the select element (despite using input in the selector) to the value of the option that's already selected, and you're surprised that it doesn't change anything? — David Thomas
– David Thomas, Commented Apr 16, 2012 at 21:53

Matt Mombrea · Accepted Answer · 2012-04-16 21:52:43Z

4

$('select[name="zoom_cat[]"] option[value="-1"]').attr('selected', 'selected');

instead of input

answered Apr 16, 2012 at 21:52

Matt Mombrea

6,8312 gold badges23 silver badges20 bronze badges

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

2 Comments

David Thomas Over a year ago

selected is a property (prop()), not an attribute. JS Fiddle.

Geekfish Over a year ago

@DavidThomas, prop and attr both work, if you use them right. It's not wrong to use attr here. Changing the selected attribute also changes the property automatically and vise versa. .attr('selected'): selected .prop('selected'): true

Shyju · Accepted Answer · 2012-04-16 21:56:45Z

Use select instead of input

$('select[name="zoom_cat[]"] option[value="-1"]').attr('selected', 'selected');

working sample : http://jsfiddle.net/Est9D/4/

You can do it in more simple way

 $('select[name="zoom_cat[]"]').val("-1")

Sample : http://jsfiddle.net/Est9D/7/

Geekfish · Accepted Answer · 2012-04-16 21:58:20Z

As Matt above said, you should use select in your selector, not input, they are different elements. Also setting the selected attribute will not work on <=IE7, so ideally you should do $('select[name="zoom_cat[]"]').val('-1');

David · Accepted Answer · 2020-06-04 15:58:36Z

You can do this: (not attr as suggested by someone but prop)

$('select[name="zoom_cat[]"] option[value="-1"]').prop('selected', 'selected');

David · Accepted Answer · 2020-06-04 15:59:03Z

0

You need to escape special characters in your selector.

See: http://api.jquery.com/category/selectors/

So try this instead:

$('input[name="zoom_cat\\\\[\\\\]"] option[value="-1"]').attr('selected', 'selected');

edited Jun 4, 2020 at 15:59

David

3,3231 gold badge42 silver badges57 bronze badges

answered Apr 16, 2012 at 21:58

Andrew Thomson

4,8903 gold badges21 silver badges15 bronze badges

1 Comment

Andrew Thomson Over a year ago

You must escape square brackets in a jquery selector for it to work correctly in IE7.

Collectives™ on Stack Overflow

jquery select option not working (by name)

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Linked

Related