Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the correct jquery selector to get all select dropdowns with a certain class name?

i want to loop through all dropdown selects with a certain class name and add an item to it and i am just struggling with the correct selector


EDIT: I must be doing something wrong as most of the upvoted accepted answer dont seem to work so i think there must be some quirk in my code. I have pasted both the HTML and the jquery code below. let me know if this makes sense.


HTML:

<select onfocus="this.enteredText='';" onkeydown="return handleKey();" onkeyup="event.cancelbubble=true;return false;" onkeypress = "return selectItem();"  class="componentSelect"  id="components0" name="applicationUpdater.dependencies[0].componentName" >
<option value= 5 >Client</option>
<option value= 79 >Server</option>
</select>

 <select onfocus="this.enteredText='';" onkeydown="return handleKey();" onkeyup="event.cancelbubble=true;return false;" onkeypress = "return selectItem();"  class="componentSelect"  id="components1" name="applicationUpdater.dependencies[0].componentName" >
<option value= 5 >Client</option>
<option value= 79 >Server</option>
</select>

etc . . .

jquery code:

    $('select.componentSelect').each(function() {
        var select = $(this);
        $(select).children('option').each(function() {
            if ($(this).text() == currentComponentName) {
                $(this).remove();
            }
        });

    });
like image 340
leora Avatar asked Jan 14 '10 14:01

leora


People also ask

Which is the correct jQuery selector to select?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

How do I select a specific class in jQuery?

In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot ( . ) and the class name. If you want to select elements with a certain ID, use the hash symbol ( # ) and the ID name.

Which is the correct jQuery selector to select all button elements and input elements with type input?

The :button selector selects button elements, and input elements with type=button.

How do I select a specific Dropdownlist using jQuery?

Syntax of jQuery Select Option$("selector option: selected"); The jQuery select option is used to display selected content in the option tag. text syntax is below: var variableValue = $("selector option: selected").


3 Answers

You should use the .class selector.

// select every <select> element with classname "yourclassname"
$('select.yourclassname').each(function() {
    // $(this) now refers to one specific <select> element
    // we append an option to it, like you asked for
    $(this).append(
        $('<option value="foo">Bar</option>');
    );
});

For more information about how to properly select elements with jQuery, take a look at http://docs.jquery.com/Selectors.

like image 137
Aron Rotteveel Avatar answered Oct 06 '22 01:10

Aron Rotteveel


To answer your new question, you can use the following line to remove all <option>s containing a currentComponentName:

$('select.componentSelect option:contains("' + currentComponentName + '")').remove();

Demo

like image 34
SLaks Avatar answered Oct 06 '22 00:10

SLaks


Give this a shot:

$('select.className').each(function() {
   var currentSelect = $(this);
   // ... do your thing ;-)
});
like image 20
Michael Waterfall Avatar answered Oct 06 '22 01:10

Michael Waterfall