jQuery .val() Selector Confusion

Question

I've kind of written myself into a corner, and was hoping there was an "easy" way out. I'm trying to loop through a series of things on my page, and build a key:value pair. Here is my structure:

<div class="divMapTab" id="divMapTab34">
    <div class="divFieldMap">
        <select class="selSrc" id="selTargetnamex"><options....></select>
    </div>
</div>
<div class="divMapTab" id="divMapTab87">
    <div class="divFieldMap">
        <select class="selSrc" id="selTargetnamex"><options....></select>
    </div>
</div>

It's way more complicated than that, and there are many select elements inside of each divFieldMap div.

Here is my JS function that is building my string:

    function Save() {
        var sSaveString = '';

        $('.divMapTab').each(function() {
            var thisId = this.id;
            $('.selSrc', "#" + thisId).each(function() {
                var thisSubId = this.id;
                //alert(thisSubId);   <-- HERE IS THE PROBLEM
                var sTargetCol = thisSubId.replace('selTarget', '');
                var sValue = this.val();
                sSaveString += sTargetCol + '¸' + sValue + '·';
            });
        });
    }

On the line that has the alert box and the text "HERE IS THE PROBLEM" is that I'm trying to get the selected value of the "current" select input element, but the id of that element isn't unique (I thought it would be, but I screwed up). Is there a good way, inside of an "each" type of jQuery statement, to use "this" to get the exact select element that I really am looking for, even if it doesn't have a unique id?

Answer 1

I believe you can create a JQuery reference to the object using $(this). Is that what you are after?

Answer 2

Valid HTML element IDs must be unique. If your document contains duplicate IDs, all bets are off.

If you really can't correctly generate unique IDs, start using classes instead.

Answer 3

So, you just want to find the value of the selects inside each div?

var myOptions = [];

$('.divMapTab').each(function()
{
    $(this).children('select').each(function()
    {
        myOptions.push(this.id, $(this).val());
    });
});

myOptions would then contain a key value pair from each select Id to it's value.