Solved

jQuery -- monitor "onchange" event for dropdownlist

Posted on 2013-02-06
11
695 Views
Last Modified: 2013-02-16
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.
0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 38862629
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 38864667
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
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 38864707
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 110

Expert Comment

by:Ray Paseur
ID: 38870819
@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
 
LVL 29

Expert Comment

by:fibo
ID: 38870921
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 38871076
          //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
 
LVL 12

Accepted Solution

by:
jagssidurala earned 400 total points
ID: 38872371
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
 
LVL 5

Assisted Solution

by:Tom Knowlton
Tom Knowlton earned 0 total points
ID: 38876536
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
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 38896155
Thanks everyone.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question