Solved

This should be simple - detect option:selected

Posted on 2013-06-05
5
174 Views
Last Modified: 2013-06-06
After the page loads, I need an event in Query that will tell me if the option value changes (selected="selected").  Even if what was selected is selected again...the event still needs to fire (possible?)

I want to show an alert(  )   showing what the drop down was changed to.

<select name="ctl08$ddlShortSaleParticipantApproval" onchange="javascript:setTimeout('__doPostBack(\'ctl08$ddlShortSaleParticipantApproval\',\'\')', 0)" id="ctl08_ddlShortSaleParticipantApproval" style="width:100px;">
	<option value="0">Unassigned</option>
	<option value="1167">Approved</option>
	<option selected="selected" value="1168">Denied</option>
	<option value="1384">Reopen</option>

</select>

Open in new window



My failed attempts:

  $('select[id*="ddlShortSaleParticipantApproval"] option:selected').change(function () {
            //$(this).css('background-color', 'green');
            alert('fire:  ' + $(this).text());
            // $('select option:selected').each(function () {
//            $('option:selected').each(function () {
//                // $(this).css('background-color', 'yellow');
//                if ($(this).text() == "Approved") {
//                    alert('found:  ' + $(this).text());
//                }
//                //        alert($(this).text());
//            });
        });

Open in new window




Now -- this code (below) works THE FIRST TIME, but subsequent choices do not fire the event after the first time:


Why isn't change(  )  firing the additional times?  Shouldn't it fire EACH time I change the selected option to something else?

 $('select[id*="ddlShortSaleParticipantApproval"]').change(function () {           
            alert('fire:  ' + $(this).text());
 });

Open in new window

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
  • 3
5 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39224285
use a fake dropdown box or change your logic
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39225706
Fake drop down not an option.  I need to use the current custom control.

What do you mean by a logic change?


Could the alert(  ) be interfering?  Like causing a loss of focus?  (I'll look at that here in a minute)
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 39225819
I needed to use live(  ) because the event was getting "unhooked":


 $('select[id*="ddlShortSaleParticipantApproval"]').live("change", function () {

        var hue = 'rgba(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',.8)';
    
        $('div').css("background-color", hue);  //changes with each selection...
    
        });

Open in new window

0
 
LVL 42

Expert Comment

by:David S.
ID: 39225973
Ah. That would do it.

It's best to avoid using live():
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 39225981
Thanks...I'll correct that!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

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