jQuery event on a specific DropDownList option

Question

I am very new to JQuery - I looked but could not find answers simple enough for my issues... I have HTML drop down list (generated by a db file) with an ID on a selection common to all lists. It is on this "Add a New" option that I would like to trigger an event that will immediately slide open a div that will allow input & update of a new name to the list.

<select name="NAME" id="NMDROP">
<option value=""></option>
<option value="JOE">Joe</option>
<option value="BOB">Bob</option>
<option id="ADDNM" value="ADD">Add a New Name</option>
</select>

This is the jQuery I am hoping will allow me to call an update pgm.

jQuery(document).ready(function () {

    //Jquery for Adding a SalesPerson
    $("#ADDNM").click(function () {
        if ($(this).is(":clicked")) {

            jQuery.ajax({
                url: "Update.pgm",
                type: "POST",
                data: {
                    "task": "ajax_addsp",
                    "ajax_add": 'Y',
                    "NAME": NAME
                },
                success: function () { alert("success:");
                },
                error: function () {  alert("error on Add a New Name " + data);
                }
            });
        }
    });
});

I am confident that many of you will be able to spot my fundamental errors. I am not even sure if this is a click or a change event, I have seen it both ways on this site.

@j08691 roasted have right. Option didn't have attribute id. Look: w3.org/TR/html-markup/option.html — WooCaSh
– WooCaSh, Commented Jun 12, 2013 at 19:46
@WooCaSh - no, roasted doesn't "have right". It's a valid attribute. Did you even read the page you linked to? It says right there that global attributes are valid on option elements, and the ID is a global attribute. — j08691
– j08691, Commented Jun 12, 2013 at 19:48

WooCaSh · Accepted Answer · 2013-06-12 20:03:15Z

1

change your code to:

$("#NMDROP").on('change', function () {
    if ($(this).val() === 'ADD'){
        //rest of code
    }
});

DEMO

edited Jun 12, 2013 at 20:03

answered Jun 12, 2013 at 19:20

WooCaSh

5,2225 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sooze Over a year ago

To try & see if I am detecting the event at all I used your code like this:

Sooze Over a year ago

I'm sorry to be so thick - because no I do not have it working yet!!

Dan · Accepted Answer · 2013-06-12 19:21:42Z

0

Instead of using click, use the change event on your dropdown and check if the selected value is "ADD".

$("#NMDROP").on("change", function(e) {
    if($("#NMDROP").val() == "ADD") {
        //ajax method here
    }
});

answered Jun 12, 2013 at 19:21

Dan

1,1111 gold badge9 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery event on a specific DropDownList option

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related