Traverse/Locate and get Other Class

Traverse/Locate and get Other Class

The problem is that I get too much output.

I would like to know the chain that would get me the other class name of a parent.

I have several forms with two words for the class. Starting with a selected <option>, I can get it's parent, the <optgroup>*. I ask for the name in the <optgroup> and use this as if it were the name of the <select multiple>. This is working fine.

But I am getting all the inputs from all the forms.

Maybe I am over-thinking this. But the solution I am looking for is this:

If I make selections and click the submit button in the green form, I need to end up with the string 'green' in a variable.

  1. HTML:
  2. =====
  3. <form class="frmclss green">
  4.  <p class="actions">XX</p>
  5.  <div class="foo">
  6.   <input type="hidden" name="add" value="id" />
  7.   <input type="submit" value="Submit" />
  8.   <div>
  9.    <span>
  10.     <select multiple class="bar">
  11.      <option value="">Select</option>
  12.      <optgroup label="group1" name="bang[opt_id]" id="bang_id">
  13.       <option value="value_id">value_name</option>
  14.      </optgroup>
  15.     </select>
  16.    </span>
  17.   </div>
  18.  </div>
  19. </form>
  20. <form class="frmclss brown">...</form>
  21. <form class="frmclss yello">...</form>
  22. <form class="frmclss sandy">...</form>
Using the Firebug console, I can verify I am getting what I need (so far), but too much of it.
  1. FIREBUG:
  2. ========
  3. var selects = new Array();
  4. $(".frmclss select").find("option:selected").each(function(){
  5. var optgroup = $(this).parent().attr("name");
  6. console.log('The optgroup is: %s', optgroup);
  7. selects[optgroup] = $(this).val();
  8. console.log('The value is: %s', $(this).val());
  9. });
  10. console.log(selects);

  1. JAVASCRIPT:
  2. ===========
  3. $('form.frmclss').submit(function(){
  4. //---------------------------------------
  5. // Find the optgroup of the selected option and give that as the select name.
  6.  var selects = new Array();
  7.  $(".frmclss select").find("option:selected").each(function(){
  8.   var label = $(this).parent().attr("name");
  9.   selects[label] = $(this).val();
  10.  });
  11. //---------------------------------------
  12.  var add = $(this).serialize(); // Need to append the selects array
  13.  var action = $(this).attr('action');
  14.  var target = $('div#target');
  15.  // added to accommodate no existing query string
  16.  var parts = action.split("?");
  17.  if(parts.length > 1) {action += "&";} else {action += "?";}
  18.  $.ajax({
  19.   url: action + 'godo=ajaxadd',
  20.   type: 'POST',
  21.   cache: false,
  22.   data: add,
  23.   complete: function(returned) {
  24.    target.replaceWith(returned.responseText);
  25.   }
  26.  });
  27.  return false;
  28. });
* Later, I will work on disabling all options within an optgroup once a selection has been made from that optgroup.