Solved

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

Posted on 2014-01-09
4
838 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
[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
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 53

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

691 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