0

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 & 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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(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();
       }

}
</script>

1 Answer 1

1

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.

8
  • :( it's working on Demo if I make change but I try on my localhost.. It's not working @Ashish
    – Nishant
    Commented Sep 24, 2014 at 11:55
  • I have tried it in jsfiddle and its working for me, what issue you are getting? Commented Sep 24, 2014 at 11:57
  • try code with slight change $('#edit-main-field-look-for-field-und').val(""); Commented Sep 24, 2014 at 12:08
  • It's working now... no need to change any thing.. Thanks alot @Ashish
    – Nishant
    Commented Sep 24, 2014 at 12:15
  • I have 1 query what it mean to put this "$('#edit-profile-main-field-look-for-field-und option:visible:eq(1)').prop('selected',true);".. If I remove this.. no issue with jquery.. @Ashish
    – Nishant
    Commented Sep 24, 2014 at 12:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.