Solved

Triggering a javascript / JQuery function when a particular option is chosen from a select dropdown

Posted on 2014-01-09
4
815 Views
Last Modified: 2014-01-09
If I have a web form that contains a select dropdown in that has an ID attribute of "shipping_state":

<select name="shipping_state">

Open in new window


How might I customize that form so that when a person chooses the state of Florida from that dropdown ..

<option value="FL">

Open in new window


.. a custom javascript function gets triggered?

Ideally .. I would prefer a solution that do NOT require that I modify the form itself.  

I am open to solutions that require JQuery if that is the best approach.  Otherwise, plain old javascript will do.

Thanks in advance.
- Yvan
0
Comment
Question by:egoselfaxis
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39768681
$("[name=shipping_state]").change(function(){
     if($(" :selected",this).val()=="FL"){
     // your function here
     }
}
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39768700
Here it is in jquery http://jsbin.com/uHERoFeX/1/edit?html,output

You said it has an id of shipping_state but your code shows it as a name.  My code below targets the name.  If you want to target the id change

$('select[name="shipping_state"]').change(function() {

to

$('select#shipping_state').change(function() {
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
  <script>
    $(function() {
$('select[name="shipping_state"]').change(function() {
    var s=$(this).val();
  if (s==='FL'){
     alert('You selected FL');
  }
});
});
  </script>
<title>JS Bin</title>
</head>
<body>
  <select name="shipping_state">
    <option value="NY">NY</option>
    <option value="FL">FL</option>
    <option value="KY">KY</option>
  </select>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:egoselfaxis
ID: 39768705
Thank you!

- yg
0
 
LVL 8

Expert Comment

by:5teveo
ID: 39768720
Here is an alert for Florida as index #2


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>


 <script>
     function test() {
         d = document.getElementById("select_id").value;
         if (d==2) {alert(d)};
         //alert(d);
     }
</script>



<body>


    <form id="form1" runat="server">
    <div>
   
            <select onchange="test()" id="select_id">
            <option value="0">-Select-</option>
            <option value="1">Communication 1</option>
            <option value="2">Florida 2</option>
            <option value="3">Communication 3</option>
            </select>


    </div>
    </form>
</body>
</html>
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

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

778 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