Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-01-09
4
Medium Priority
?
854 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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.
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…
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 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…

604 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