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
Solved

jQuery -- monitor "onchange" event for dropdownlist

Posted on 2013-02-06
11
691 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:knowlton
11 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 38862629
0
 
LVL 5

Author Comment

by: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: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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 109

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:knowlton
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:knowlton
ID: 38896155
Thanks everyone.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

828 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