?
Solved

jQuery -- monitor "onchange" event for dropdownlist

Posted on 2013-02-06
11
Medium Priority
?
699 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
Quick Start: DOCKER

Sometimes you just need a Quick Start on a topic in order to begin using it.. this is just what you need to know to get up and running with Docker!

 
LVL 111

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 400 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 1600 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

AWS Certified Solutions Architect - Associate

This course has been developed to provide you with the requisite knowledge to not only pass the AWS CSA certification exam but also gain the hands-on experience required to become a qualified AWS Solutions architect working in a real-world environment.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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 …
Suggested Courses

752 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