CODEWITHSUNDEEP
jqueryhtml-select
Kaspars Milbergs
Kaspars Milbergs

Reputation: 784

jQuery filter select options

Is it possible to filter specific select options?

I have a code :

<select id="adcategory" name="adcategory">
    <option value="">Select</option>
    <option value="25" class="dropdownparentcategory">Florida Atlantic University</option>

    <option value="26">- Books </option>
    <option value="27">- Electronics</option>
    <option value="28">- For Rent</option>

    <option value="17" class="dropdownparentcategory">Florida International University</option>

    <option value="18">- Books</option>
    <option value="19">- Electronics</option>
    <option value="20">- For Rent</option>

    <option value="1" class="dropdownparentcategory">Florida Tech</option>
    <option value="2">- Books</option>
    <option value="3">- Electronics</option>
    <option value="7">- For Rent</option>


</select>

So if the variable for example $school = Florida Atlantic University than show only thoes options witch is till next school category ( .dropdownparentcategory ), so in this case they would be only : 

<select id="adcategory" name="adcategory">
    <option value="">Select</option>

    <option value="26">- Books </option>
    <option value="27">- Electronics</option>
    <option value="28">- For Rent</option>

</select>

As you can see in this image :

enter image description here

Is it possible to create with jQuery?

Upvotes: 1

Views: 6152

Answers (4)

JETR NSEF
JETR NSEF

Reputation: 354

i would say, add classes for all your element by categorizing 

<option class="js_atl" value="25" />
<option class="js_atl" value="26" />
<option class="js_atl" value="27" />
<option class="js_int" value="28" />
<option class="js_int" value="29" />

so like that you can use ur $school = "Florida Atlantic University" show or append or what ever with $(".js_atl") for the other category $(".js_int") which returns array of selected elements in that class category.

hope this helps.

Upvotes: 2

Tejs
Tejs

Reputation: 41246

This looks like potentially bad design. I would suggest moving to <optgroup> [MDN] tags to group your drop down items:

<select>
    <optgroup label="Florida Atlantic University">
        <option value="1">Text</option>
        <option value="2">Text</option>
        <option value="3">Text</option>
    </optgroup>
    <optgroup label="Florida Tech">
        <option value="4">Text</option>
        <option value="5">Text</option>
        <option value="6">Text</option>
    </optgroup>
</select>

Then it's trivially easy to select child elements;

$('optgroup[label*="' + yourSchoolName + '"]').find('option')

Upvotes: 8

user610217
user610217

Reputation:

You should be able to apply a style of "display: none;" to the tags you don't want visible.

Upvotes: 0

Alex Turpin
Alex Turpin

Reputation: 47776

Sure is.

$("#adcategory option:contains('Florida International University')").nextUntil(".dropdownparentcategory")

http://jsfiddle.net/Xeon06/YEeMH/

Upvotes: 2

Related Questions