Question

I have stared too long on this apparently not working little piece of code. Why doesn’t select box rel attribute get alerted?

HTML:

<select rel="prop216" name="prop[]">
  <option value="">- none</option>
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
</select>
<select rel="prop217" name="prop[]">
  <option value="">- none</option>
  <option value="12">Opt 1</option>
  <option value="13">Opt 2</option>
</select>

jQuery:

$("select").change(function()
{
 var i = 0;
 var alteredSelects = [];
 $("select").each(function()
 {
    if ( $(this).val() !== "" )
    {
        alteredSelects[i][0] = $(this).attr('rel');
        alteredSelects[i][1] = $(this).val();
        alert ($(this).attr('rel'));
        i++;

    }
 });
});

See also my jSfiddle: http://jsfiddle.net/ft6Bd/1/

I get an error in Firefox

TypeError: can’t convert undefined to object

on the line alteredSelects[i][0] = $(this).attr('rel');

But can’t seem to realize why.

Answer 1

You first have to initialize alteredSelects[i] before you can assign values to it:

$("select").change(function() {
    var i = 0;
    var alteredSelects = [];
    $("select").each(function() {
        if ( $(this).val() !== "" ) {
            alteredSelects[i] = []; // <-- Initialize `alteredSelects[i]` as empty array.
            alteredSelects[i][0] = $(this).attr('rel');
            alteredSelects[i][1] = $(this).val();
            alert($(this).attr('rel'));
            i++;
        }
    });
});

The problem was that you were trying to save something to alteredSelects[i], while alteredSelects[i] was null.