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

Question

我正在尝试为我的网站创建一个‘在线银行’风格的认证，用户通过3个下拉框从秘密密码短语中选择第5和第6个数字字母，每个下拉框代表密码短语的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

你能解释一下它的功能吗？是否只有一个select元素？这可能是你想要的一半。在这里看到它的工作原理：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('*');
   }
});