Need help to debug jQuery selector logic

I have a drop-down selector and need to load other parts of the form based on selection. I need to make sure that NO same options are selected. Here's my attempt to validate based on @Mike Ruhlin suggestion. It still does not work, but I feel like I'm quite close. Also, I noticed that my logic broke. By selecting one option all three below are showing the same now. Each selection should load only one selection imediately below.

What am I missing here?

Here's what I've got so far:

$('.mySelector').change(function(){

        var selectForm = '.' + $(this).val();           

        if (selectForm != '.selectOne') {
            // check for dupe selections
            var alreadyUsed = {};

            $("s开发者_开发技巧elect").each(function(){

                var thisVal = $(this).val();

                if(alreadyUsed[thisVal]){
                    // found a dupe
                    alert('already used');
                }

                $('div').next('.fLoad').load('formParts.html ' + $selectForm );

            });
        }
});

<select class="mySelector">
   <option value="selectOne">Select one</option>
   <option value="o1">Car details</option>
   <option value="o2">Boat details</option>
   <option value="o3">Train details</option>
   <option value="o4">Bike details</option>
   <option value="o5">Sub details</option>
</select>

<div class='fLoad'> </div>

<select class="mySelector">
   <option value="selectOne">Select one</option>
   <option value="o1">Car details</option>
   <option value="o2">Boat details</option>
   <option value="o3">Train details</option>
   <option value="o4">Bike details</option>
   <option value="o5">Sub details</option>
</select>

<div class='fLoad'> </div>

<select class="mySelector">
   <option value="selectOne">Select one</option>
   <option value="o1">Car details</option>
   <option value="o2">Boat details</option>
   <option value="o3">Train details</option>
   <option value="o4">Bike details</option>
   <option value="o5">Sub details</option>
</select>

<div class='fLoad'> </div>

i wasn't sure what you were doing with this:

$('div').next('.fLoad').load('formParts.html ' + $selectForm );

I figured you can put it back in the right spot ;)

 $('.mySelector').change(function(index, elem){
    var filter = $(this).val();
    if(filter !="selectOne"){
        var size = $('.mySelector').not(this).not(function(index){
            return $(this).val() != filter;
        }).size();
      if(size > 0){
        alert("duplicates!");
     }

    }

});

Your $('div') selector selects all divs on the page and looks for a .float class after them. I'm assuming you want to select only the div immediately after the current <select>.

You'll have to do something like $(this).next('div.fLoad').load(url)

Also, I'm not sure what you're trying to load with 'formParts.html ' + $selectForm, since you'll have a url with a filename, a space, and a select value. If you want to pass the value as a parameter, it would have to be in this form: formParts.html?paramName=paramValue, but then html files don't process parameters. Although, that's a whole other issue. :)