Display number of Drop downs whose selected item text is not "Select answer"

Please help me to solve this problem

I want to display number of Dropdowns whose selected item text is not "Select answer".

Below is my HTML code..

<table>
       <tr>
          <td>
          <select id="S1"  class="dropdown">
                  <option value=""  selected="selected">Select answer</option>
                  <option value="1">A</option>
                  <option va开发者_如何学Clue="2">B</option>
                  <option value="3">C</option>
         </select>
         </td>
          <td>
          <select id="S1"  class="dropdown">
                  <option value=""  selected="selected">Select answer</option>
                  <option value="1">A</option>
                  <option value="2">B</option>
                  <option value="3">C</option>
         </select>
         </td>
     </tr>
     <table>

Below is my jQuery code

  $('select').change(function()
  {
    alert($(this).parents('TR').find('select').filter($(this).find("option:selected").text()!="Select answer").size())
  });

But it is not working, It seems There is some problem with my code.Please someone help me.

Try this:

var count = $(this).parents('TR').find('select').filter(function() {
    return $(this).find("option:selected").text() == "Select answer";
}).length;

alert(count);

This should work:

$('select').change(function()
{
   var count = 0;
   $("select").each(function() {
       if (!$(this).val()){
           count++;
       }
   });

   alert(count);
});

Try: http://jsfiddle.net/Hn5HC/

Also you have two identical IDs.

Slight variation to @dogbert's:

$('select').change(function(){
    var $selects = $(this).closest('tr').find('select');
    var answered = $selects.find('option:selected').filter(function(i){
        return ($(this).val() != '' ? this : null);
    }).length;
    alert(answered);
});

DEMO

I personally like checking against the selected option's absent value, and not the option's display text--but that may just be me.

Fixing your HTML so the Selects have unique ID's:

<table>
       <tr>
          <td>
          <select id="S1"  class="dropdown">
                  <option value=""  selected="selected">Select answer</option>
                  <option value="1">A</option>
                  <option value="2">B</option>
                  <option value="3">C</option>
         </select>
         </td>
          <td>
          <select id="S2"  class="dropdown">
                  <option value=""  selected="selected">Foobar</option>
                  <option value="1">A</option>
                  <option value="2">B</option>
                  <option value="3">C</option>
         </select>
         </td>
          <td>
          <select id="S3"  class="dropdown">
                  <option value=""  selected="selected">Select answer</option>
                  <option value="1">A</option>
                  <option value="2">B</option>
                  <option value="3">C</option>
         </select>
         </td>
     </tr>
 <table>

Using this JQuery:

$(function(){
    alert($('select').map(function(){
        if($(this).find(':selected').html() == 'Select answer')
        {
               return $(this).attr('id');
        } 
    }).get().join(','));
});

Will alert S1,S3