Solved

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

Posted on 2014-01-09
4
821 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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Find out what you should include to make the best professional email signature for your organization.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

840 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