Question

I have 3 select option in my html page like this

    <select class="combo">
    <option value=""></option>
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    </select>
    <br/>
    <select class="combo">
        <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    </select>
    <br/>
    <select class="combo">
       <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    </select>
<br/>
<button type="submit" class="search_btn">
                                <img src="media/images/search_icon.png" title="Search" /></button>
                            <input type="text" lang="fa" id="search" name="search"/>

I want if the first select value was NOT null, trigger an action. something like this.

if( $('.combo').has('option').length > 0 ) { 
 $('#search').val('');
}

The problem is that i don’t know how to address this action for the first select and not the second and third (because they have same class names).

Note that i don’t want to set ID to the first select in code preview

Answer 1

You can use :first selector:

if ( $('.combo:has(option):first').length > 0 ) { 
   $('#search').val('');
}

Note that $('.combo:has(option):first') differs from $('.combo:first:has(option)') the first one selects the first select.combo that has option element and the second one selects the first select.combo only if that has option element.