SELECTS: Hide the selected option on a secondary select
<p>I have two select with the same elements (options) in it.
What I am trying to do is that when the user select a value from the first select box, the second select box hides that option, and automatically select the first visible option if the selected option was the same as the one in the first select.</p>

<p>I know that <code>:first</code> selects the first element of a group of "objects", and that <code>:visible</code> only select the "visible" ones, so i was thinking that using <code>:first</code> of <code>:visible</code> should work, but what I am getting is no selection at all.</p>

<p>if I remove the <code>:visible</code> it works unless the second select box has the first element selected, and the user selects the first element on the first select box</p>

<p>This is what I have so far, please keep in mind that I have tried <code>:first</code> and <code>:visible</code> in any combination, but I really think that the problem here is that "hide hasn't finished its job when I use <code>:visible</code></p>

<pre><code>$('#style_position').change(function(){
    var sel_pos_id      = $(this).val();
    var sel_xtr_pos_id  = $('#style_position_extra').val();
    $('#style_position_extra option[value=' + sel_pos_id + ']').hide().siblings().show();
    if(sel_pos_id==sel_xtr_pos_id){
        $('#style_position_extra option')
            .removeAttr('selected')
            .filter(':visible')   //I also tried find(':visible')
            .filter(':first')     //I also tried find(':first')
                .attr('selected','selected');
    }
});
</code></pre>
