CODEWITHSUNDEEP
jqueryjquery-selectors
Sheraf
Sheraf

Reputation: 493

jQuery selector - get <select> element only if <option> is not disabled

I'm looking for a jQuery selector that would return the <select> element only if the <option> selected is NOT disabled.

HTML:

<form>
    <select name="input-select">
        <option disabled selected>Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

Now, if you run this jQuery selector:

$("form select option:selected:not([disabled])")

it will either return [] if the disabled option is select, or either return the <option> selected.
I need to get the <select> element return, i know i could be using .parent(), but i can't use it for some reason in my code.

Also

$("form select option:selected:not([disabled]):parent")

Doesn't return the parent, i though :parent was there for that?

EDIT: That may help you guys to understand my goal:

$.each($("form").find("input[name], textarea[name], select[name] option:selected:not([disabled]):parent"), function(index, value) {
    console.log(value.name+"="+value.value);
});

So, i just want to return every "input" element of a form, only if they are valuable for me

Upvotes: 2

Views: 7066

Answers (3)

Sheraf
Sheraf

Reputation: 493

This can't be done with one selector, so we need to use .add(), like Kolban said:

var selection = $("form").find("input[name], textarea[name]");
selection.add($("form").find("select[name] option:selected:not([disabled])").parent())

Upvotes: 1

Kolban
Kolban

Reputation: 15246

Here is a query example that will find options that are selected but not disabled:

$("form select option[selected]:not(option[disabled])")

This can be tested/demonstrated with the following code fragment:

$(function(){
    $("form select option[selected]:not(option[disabled])").each(function(i, e) {
        console.log("Item: %O -> %s", e, e.outerHTML);
    });
    console.log("Done!");
});

If one wishes to find the containing <select>, the following may be used:

An illustrative jsFiddle has been provided.

$("form select option[selected]:not(option[disabled])").parent("select")

A fiddle for this has also been provided.

Upvotes: 0

Prabu
Prabu

Reputation: 4187

How about using the following code to determine it:

var selectedOption = $("select option:selected");

if(selectedOption.is(":enabled"))
{
    var parentObject = selectedOption.parent();
    console.log(parentObject);
}

Demo: Fiddle

Upvotes: 4

Related Questions