jQuery selectors: multiselect vs select

Question

Hello,

Is it possible, via jQuery, to select a multiselect to a select, differently?

The issue I'm having is that I have a general js called that does something to an id. However on some pages it has a different purpose.

Therefore I would like about to recognize the difference.

$("select#categories[multiselect]").doOneThing; //multiselect
$("select#categories").doAnotherThing; //normal single select

Possible?

Answer 1

Why wouldn't you add a class to the ID, if they are going to do different things?

<div id="selector" class="selector-1">
</div>

<div id="selector" class="selector-2">
</div>

$("select#selector.selector-1").doOneThing;
$("select#selector.selector-2").doAnotherThing;

Multi select will also fail on IE6

Answer 2

The correct attribute name for a <select> element with multiple selectable options is multiple. You can use the "has attribute" selector to select elements with the multiple attribute, and combine it with :not() to select elements that only allow a single selection.

Therefore, your jQuery selector should be:

$("select#categories[multiple]")  // <select> with multiple 
$("select#categories:not([multiple])")  // <select> with single only 

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION

Answer 3

If you have something like this (XHTML):

<select id="categories" size="3" multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

You could create a selector, that checks for the multiple-attribute. Try something like this:

$('select#categories[multiple="multiple"]').doOneThing();