Social network list management I have multiple drop down lists (select &amp; option) that are populated by data from the server. They all have the same options, but I need the use to be able to select every option only once - it can appear as selected only on one list.

This is the HTML of a single list - simple select &amp; options list:

&lt;div class="social-option"&gt;
    &lt;select name="hex_theme_options[social-service-1]"&gt;
        &lt;option selected="selected" value="0"&gt;&lt;/option&gt;
        &lt;option value="facebook"&gt;facebook&lt;/option&gt;
        &lt;option value="twitter"&gt;twitter&lt;/option&gt;
        &lt;option value="linkedin"&gt;linkedin&lt;/option&gt;
        &lt;option value="e-mail"&gt;e-mail&lt;/option&gt;
        &lt;option value="phone"&gt;phone&lt;/option&gt;
        &lt;option value="instagram"&gt;instagram&lt;/option&gt;
        &lt;option value="flickr"&gt;flickr&lt;/option&gt;
        &lt;option value="dribbble"&gt;dribbble&lt;/option&gt;
        &lt;option value="skype"&gt;skype&lt;/option&gt;
        &lt;option value="picasa"&gt;picasa&lt;/option&gt;
        &lt;option value="google-plus"&gt;google-plus&lt;/option&gt;
        &lt;option value="forrst"&gt;forrst&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;


And this is the JS code for managing them the way I described. It works, but it looks pretty ugly to me, and I'd like to improve it's structure. Any suggestions are welcome.

jsFiddle

(function($){
    $(document).ready(function() {

        var siblings = {
            lock: function (newSelected){
                var selectedSiblings = $('.social-option select').find("option[value=" + newSelected.val() + "]");
                selectedSiblings.not(newSelected).attr('disabled', 'disabled');
            },
            unlock: function (oldSelected){
                var selectedSiblings = $('.social-option select').find("option[value=" + oldSelected.val() + "]");
                selectedSiblings.removeAttr('disabled');
            },
            unlockZero: function (){
                $('.social-option select').find("option[value='0']").removeAttr('disabled');
            }
        };


        function checkSiblings(oldSelected, newSelected) {
            if (oldSelected === '0') {
                siblings.lock(newSelected);
            } else if (newSelected === '0') {
                siblings.unlock(oldSelected);
            } else {
                siblings.unlock(oldSelected);
                siblings.lock(newSelected);
            }
        }


        $('.social-option select').each(function() {
            siblings.lock($('option:selected', this));
            siblings.unlockZero();
        });

        $('.social-option select').on('focus', function () {
            var oldSelected = $('option:selected', this);

            $('.social-option select').on('change', function () {
                var newSelected = $('option:selected', this);
                checkSiblings(oldSelected, newSelected);
            });
        });


    });
})(jQuery);
I could be wrong, but I think you could shorten ALOT of the code as follows:

$(function () {
    $(".social-option select").on("change", function(e) {
        $(".social-option select option:disabled").prop("disabled", false);
        $(".social-option select option:selected").each(function(i) {
            var $val = $(this).val();
            if ($val !== '0') {
                $(".social-option select option[value="+$val+"]").prop("disabled", true);
            };
        });
    }).change();
})​;


See fiddle with dynamic drop down added here