在同一下拉框中选择值时更改下拉框的选定值

Question

我正在尝试为我的网站创建一个“在线银行”风格的身份验证，其中用户通过 3 个下拉框从秘密密码短语中选择第 5 和第 6 以及 [whatever] 数字字母，每个下拉框代表 1 个字母密码短语，由应用随机选择，一旦他们在每个下拉菜单中选择了请求的数字，下拉菜单应显示星号 [*] 而不是显示秘密密码的数字。

我还使用 jQuery 来操作和捕获选择框上的事件。

我目前正在使用

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

但我试过了

.blur()   and  .click()

并且使用自定义函数来计算点击次数并在第二次点击时做出反应也会失败。

我当前的方法不是很流畅，对“onChange”事件做出反应，然后更改内容似乎会使浏览器有点混淆，因此“不流畅”。使用键盘效果最好，但使用鼠标意味着焦点在文本框之间跳动很烦人，如果我“单击并按住”文本框，效果最好。

对使用 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');
}

我有一个“隐藏字段”存储用户选择的值（不能依赖下拉框的值），上面的函数执行实际的“混淆”。

Answer 1

您能再解释一下这个功能吗？只有一个选择元素吗？这可能是你想要的部分。在这里看到它的工作：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('*');
   }
});