Question

I have multiple select boxes in my document and some of them are load with page load and some of them created dynamically. for example:

<select>
    <option>select one</option>
</select>

<select></select>

<select>
    <option>select two</option>
</select>

<select>
    <option>select three</option>
</select>

<select>
</select>

and more are created dynamically some of with and some are empty.

I want to get the first empty select among them at page load and click on a button again want to get the first empty select box from the last one I get and continue this until no such select box further exists.

NOTE from the last one means,

If I get the first empty select box from first, then one button click search will start from that select box and continue until again get an empty select and so on.

Answer 1

Try this:

$('select:empty:first');

but one think to note that, above selector only works if your select box are like
    
   

<select></select> // even without any newline

because :empty point element with no child, not event with newline or text node.

So if your select is look like:
    
 

<select>
</select>

above selector will fail. To get select like both type you can use

$('select').filter(function() {
  return !this.innerHTML.replace(/\s/g,'').length;
}).first();

or as @gdoron mentioned

$('select').filter(function() {
  return !$.trim(this.innerHTML);
}).first();

In my choice, second one is reliable.

// solution to your recursive search

$('select')
    .filter(function() { // filtering for empty select
        return !this.innerHTML.replace(/\s/g,'').length;
     })
    .first() // taking the first
    .addClass('lastIndentified'); // adding a class to keep track

$('button#search').on('click', function() {
  // reference for last empty select
  var lastIndentified = $('select.lastIndentified');

  lastIndentified
      .nextAll('select') // searching for all select
      .filter(function() { // making filtering
           return !this.innerHTML.replace(/\s/g,'').length;
      })
      .first() // taking first one from lastIndetified
      .addClass('lastIndentified');
    lastIndentified.removeClass('lastIndentified'); // remove class from last empty select and pass it to new empty select

    // for example
    // calling function to process with last empty select
    processWithLastEmptySelect($('select.lastIndentified'));
});

function processWithLastEmptySelect(lastSelect) {
   // your code if needed
   lastSelect.css('border', '1px solid green');
}

Working Demo