How to target parent div of selected option in jQuery?

Question

I am somewhat new to jQuery and am hoping to get a little help on this problem I have.

Heres what I am trying to do:

I need the ability to fire off a notification when a user selects an option from a select box. All the select boxes on the page share the same id and name, as well as live under div classes with the same name. This part is working, however I will have multiple select boxes on the page. When I make a selection for one, it fires off the notification to all instances instead of just the selected one.

How do only get the notification to fire on the selected instance?

Here is the JS so far:

$("select[name=regStatus]").change(function () {
      var str = "";
      var text = $(this).find("option:selected").text(); 
            str += " Status changed to: " + $(this).find("option:selected").text();

      $(".responseMsg").text(str).fadeIn(500);
      $(".responseMsg").delay(2000).fadeOut(1000);

     return false;  

  });

AND the html structure (this code will be repeated on the page several times):

<div class="dash-hdr-extras plain">
  <div class="responseMsg"></div>
     <select id="regStatusSelect" name="regStatus">
    <option value="0">Example1</option>
        <option value="blah">Blah</option>
        <option value="blah2">Blah 2</option>
     </select>
 </div>

Any help on this would be greatly appreciated, as I am still learning!

Answer 1

$("select[name=regStatus]").change(function () {
    //...Your code...
    $(this).parent().find(".responseMsg").text(str).fadeIn(500);
    //...Rest of your code...
});

This gets the parent of the element that fired the change event, and then finds the children of that element matching the selector.

The reason it was writing your message to all .responseMsg elements, is that using $(".responseMsg") simply selects all matching elements in the DOM, and applies whatever follows to the entire set.

Another option, if you are sure the structure of your HTML is not going to change, is to use the prev method, which gets the previous sibling of the current element. With the code in your question, that's fine, but if it changes this might not work:

$(this).prev().text(str).fadeIn(500);

On a separate note, you mention in your question that all select elements have the same ID. That's invalid HTML and will cause you no end of problems. Every ID in a document needs to be unique.

Answer 2

Try this

$("select[name=regStatus]").change(function () {
      var str = "";
      var text = $(this).find("option:selected").text(); 
            str += " Status changed to: " + $(this).find("option:selected").text();


      $(this).closest("div.dash-hdr-extras").find("div.responseMsg").text(str).fadeIn(500)
      .delay(2000).fadeOut(1000);

  return false;

});

Answer 3

Also, like james said, Ids should not be repeated. To use the same function on many elements, do this:

$("#select1")
    .add('#select2')
    .add('#select3')
    .add('#select4')
    .add('#select5')
    .change(function () {
});

keep the Ids unique...