Apply condition between two fields in drupal 7 by using JQuery This is updated JQuery code I have created condition between two fields in drupal 7 i.e. If we select item from first field then as per there selected item, some items of second field is going to hidden. But problem is that : If first I select item from second select field &amp; after that I have select same item in first field then in this condition my created condition is wrong. Please Help to solve this. Thanks

Please check this DEMO

Below is my my updated JQuery code

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
abc();
$("#edit-main-field-i-am-field-und").change(function() {
    var value = $(this).val();
    var optionText = $(this).find('option[value='+value+']').val();

    $('#edit-main-field-look-for-field-und').find('option').show();

       if(optionText=="sbf" || optionText=="smf" )
       {

           $('#edit-main-field-look-for-field-und').find('option').filter(function(){
               if($(this).val()=="sbf" || $(this).val()=="smf")

                 return true;
              else
                 return false;
           }).hide();
       }
      else
       {

           $('#edit-main-field-look-for-field-und').find('option').filter(function(){
               if($(this).val()=="sdm" || $(this).val()=="sbm")
                 return true;
              else
                 return false;
           }).hide();
       }

    });
});

function abc()
{

   var value = $('#edit-main-field-i-am-field-und').val();



if(value=="sbf" || value=="smf" )
       {

           $('#edit-main-field-look-for-field-und').find('option').filter(function(){
               if($(this).val()=="sbf" || $(this).val()=="smf")
                 return true;
              else
                 return false;
           }).hide();
       }
      else
       {

           $('#edit-main-field-look-for-field-und').find('option').filter(function(){
               if($(this).val()=="sdm" || $(this).val()=="sbm")
                 return true;
              else
                 return false;
           }).hide();
       }

}
&lt;/script&gt;
I have tried your code and got a quick solution i.e. reset second select box every time first is changed.

look how I have implemented the same:

$(function(){
$("#edit-main-field-i-am-field-und").change(function() {

    $('#edit-main-field-look-for-field-und').val("_none"); // added to reset second select box on chanage of first one

       var value = $(this).val(); 
       var optionText = $(this).find('option[value='+value+']').text();
    $('#edit-main-field-look-for-field-und').find('option').show();
       if(optionText=="A" || optionText=="C" )
       {
         //alert("12345");
           $('#edit-main-field-look-for-field-und').find('option').filter(function(){
               if($(this).text()=="A" || $(this).text()=="C")
                 return true;
              else
                 return false;
           }).hide();
       }
      else
       {
           //alert("98765");
           $('#edit-main-field-look-for-field-und').find('option').filter(function(){
               if($(this).text()=="B" || $(this).text()=="D")
                 return true;
              else
                 return false;
           }).hide();
       }
    $('#edit-main-field-look-for-field-und option:visible:eq(1)').prop('selected',true);
   // alert($('#edit-main-field-look-for-field-und').val());
    });
});


I have just added $('#edit-main-field-look-for-field-und').val("_none"); in .change function.