jQuery -- monitor "onchange" event for dropdownlist

Using jQuery, how do I monitor the "onchange" event for one or more dropdownlist controls?

What I want to do is if all the dropdownlist controls have text = "Denied" I want to SHOW a <div> that was hidden before.
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
 
jagssiduralaConnect With a Mentor Commented:
To work show(), the visiblity state of the div should be style="display:none".

I think you have put visibilty hidden. try with display none.

OR

are you want to display one div or a set of divs with the ids like divNewBids.

If it one is div, do not use like operator (*).

just $('#divNewBids').show() is enough.

and also check divNewBids is a class name or id name.

if it is a class, use $('.divNewBids').show() for single.

$('div[class*="divNewBids"]').show(); for multiple.
0
 
Kiran SonawaneProject LeadCommented:
0
 
Tom KnowltonWeb developerAuthor Commented:
This code is working, but the div I am trying to show won't show.  Nothing happens when I call "show(  )":



<script type="text/javascript">


    $(document).ready(function () {
            
        var howmanybidstatusdropdowns = $('select[id*="ddlStatus"]').size();
        var currentcount = 0;
            
        //alert(howmanybidstatusdropdowns);
        
        $('select[id*="ddlStatus"]').change(function () {
            
            var countoffound = 0;
            
            $('select[id*="ddlStatus"] option:selected').each(function () {
            
                if ($(this).text() == "Denied") {
            
                    countoffound = countoffound + 1;
                    currentcount = countoffound;            
                }
            });

            if (countoffound == howmanybidstatusdropdowns) {
                alert(countoffound + ' were found');                
            }
        });

        if (currentcount == howmanybidstatusdropdowns) {
            alert(countoffound + ' were found');


            //THE ALERT FIRES, BUT THIS LINE OF CODE DOES NOTHING...
            $('div[id*="divNewBids"]').show();
        }


    });
                                  
</script>

Open in new window

0
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
Tom KnowltonWeb developerAuthor Commented:
That code was wrong above.  The other alert was firing, not the one that I intended.


Here is the updated code:

<script type="text/javascript">


    $(document).ready(function () {

        var howmanybidstatusdropdowns = $('select[id*="ddlStatus"]').size();
        var currentcount = 0;

        //alert(howmanybidstatusdropdowns);

        $('select[id*="ddlStatus"]').change(function () {

            var countoffound = 0;

            $('select[id*="ddlStatus"] option:selected').each(function () {

                if ($(this).text() == "Denied") {

                    countoffound = countoffound + 1;
                    currentcount = countoffound;
                }
            });


            if (currentcount == howmanybidstatusdropdowns) {
              
              //THIS ALERT STILL FIRES 
              alert(countoffound + ' were found');


            //THIS DOES NOTHING...
               $('div[id*="divNewBids"]').show();
            }

        });


        alert('outside');

    });

Open in new window

0
 
Ray PaseurCommented:
@knowlton:  I am not a jQuery expert and don't really have time to research this, but I can see from just reading the question and the code example, that it is very incomplete.  So I would like to offer a suggestion that will help you get a better answer.  Follow the excellent guidance of the SSCCE.  With a valid SSCCE, we would see the HTML document as well as the jQuery statements, and it would be packaged into something we could copy, paste and run on our own servers.  If you frame a question with that little extra bit of detail you will get good answers very quickly.

You might also ask a moderator to add this question to the JavaScript and HTML Zones.  You can have up to five Zones for any question and I am sure some experts in those two additional Zones would be able to help.

Best of luck with it, ~Ray
0
 
fiboCommented:
not a jQuery expert either.

But looking at the code, I would think that
       $('div[id*="divNewBids"]').show();
would probably need something to handle the * which implies that the selection might have several items. So, without knowing too much about jQuery I would first test
       $('div[id*="divNewBids"]').each.show();
or
       $('div[id*="divNewBids"]').each(show());
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
          //THIS DOES NOTHING...
               $('div[id*="divNewBids"]').show();

That mean the selector is wrong
mean you don't have div like this one :
 <div id="fflldkfdlkfdivNewBidslslfkskfslk">....</div>

so nothing to show
are you sure it's an ID attribute and not a class?
So you need to use a << . >> instead << # >>

Could you paste the HTML/CF?/ASP.NET? code for this div and only for this div (not your full page)?
0
 
Tom KnowltonConnect With a Mentor Web developerAuthor Commented:
This code below is now working fine.  I think the problem was I had some invalid statements in the <div> I was trying to show(  ).


<script type="text/javascript">


    $(document).ready(function () {

        var howmanybidstatusdropdowns = $('select[id*="ddlStatus"]').size();
        var currentcount = 0;

        //alert(howmanybidstatusdropdowns);

        $('select[id*="ddlStatus"]').change(function () {

            var countoffound = 0;

            $('select[id*="ddlStatus"] option:selected').each(function () {

                if ($(this).text() == "Denied") {

                    countoffound = countoffound + 1;
                    currentcount = countoffound;
                }
            });


            if (currentcount == howmanybidstatusdropdowns) {    
                $('div[id*="divNewBids"]').css('width', 'auto');
                $('div[id*="divNewBids"]').css('height', 'auto');
                $('div[id*="divNewBids"]').css('visibility', 'visible');              
            }

        });
    });
                                      
</script>

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
Thanks everyone.
0
All Courses

From novice to tech pro — start learning today.