Changing the selected value of a Pull Down Box on selection of a value in the same Pull Down Box

I'm trying to create a 'Online Banking'-styly authentication for my website where the user selects the 5th and 6th and [whatever] number letter from a secret passphrase via 3 pulldown boxes, each pull down box representing 1 letter of the passphrase, randomly choosen by the app, and once they select the requested digit in each pull down, the pulldown should display an asterisk [*] instead of displaying the secret passphrase's digit.

Also I'm using jQuery to manipulate and catch events on the select boxes.

I'm currently using the

$('#selectboxID').change(function() {pulldownObfuscation('selectboxID','hfID')});

but I've tried

.blur()   and  .click()

and using a custom function to count clicks and react on second click also fails.

My current method is not very smooth, and reacting to the 'onChange' event, and then changing the contents appears to confuse the browser a bit, hence 'not smooth'. It works best using the keyboard, but using the mouse means focus jumps around annoying between the text boxes, and work best if I 'click and ho开发者_开发技巧ld' on the text box.

Any thoughts on the best cross browser solution using jquery?

function pulldownObfuscation(pullDownID,hfID) {
        var selectedVal = new String($('#' + pullDownID + ' :selected').val());
        if (selectedVal == '*') return;
        $('#' + hfID).val(selectedVal);
        $('#' + pullDownID + ' option:eq(1)').attr('selected','selected');
}

I have a 'hiddenfield' storing the users selected value (cant rely on the pull down box's value), above function does the actual 'obfuscation'.

---

Could you explain the functionality a little more? Is there just a single select element? This may be partway towards what you want. See it working here: http://jsfiddle.net/Yre8X/

$('select option').click(function(){
   var selectedVal = $(this).val();
   if (selectedVal=='*'){
      return;
   }else{
      $(this).parent().attr('disabled','true');
      $(this).parent().next('#hfID').val(selectedVal);
      $(this).parent().children('option').text('*').val('*');
   }
});