zoukankan      html  css  js  c++  java
  • jQuery实现密保互斥问题

    密保互斥问题:

    密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥。

    效果如下:



    下面我用了jquery实现密保互斥,用于解决密保,投票等类似互斥问题,可以支持ie6+,火狐,谷歌,opera等大多数浏览器

    demo下载:http://download.csdn.net/download/cwqcwk1/5956141


    关键代码:

    <script type="text/javascript">
    var qObj = {
      elmt:'select',
      tip:'请选择',
      tVal:'',
      cur:[],
      arr:{
        1:'你的小学叫什么名字?',
        2:'你最崇拜的人物是谁?',
        3:'你最喜欢的花名字叫什么?',
        4:'你父亲的职业是?',
        5:'你父亲的姓名?',
        6:'你高中班主任的名字?'
      }
    }
    
    $(function(){
      //获取所有的select选框
      var elements = $(qObj.elmt);
    
      //这一步只是初始化操作,将所有问题写入select选框
      elements.each(function(i){
        var html = '<option value="'+ qObj.tVal +'">'+ qObj.tip +'</option>';
        for(var q in qObj.arr){
          html += '<option value="'+ q +'">' + qObj.arr[q] + '</option>';
        }
        $(this).html(html);
      });
      
      //select选框添加监听事件
      elements.change(function(){
        var
          cValue = {},                   //用于记录当前被选中的问题
          elmts = elements,
          cIndex = elmts.index($(this)); //当前select选框索引值
    
        //遍历所有select选框,记录当前每个选框的选择
        elmts.each(function(i){
          qObj.cur[i] = $(this).val();
        });
    
        //记录当前已被选中的问题,实现互斥锁
        for(var i in qObj.cur){
          cValue[qObj.cur[i]] = 1;
        }
    
        //遍历所有select选框,重置所有问题
        elmts.each(function(i){
          //跳过当前的select选框,因为该内容无需校正
          if (cIndex == i) return;
          var html = '<option value="'+ qObj.tVal +'">'+ qObj.tip +'</option>';
          for(var q in qObj.arr){
            //如果是互斥内容,且不属于这个选框则跳过(重点)
            if (cValue[q] && q != qObj.cur[i]) continue;
            html += '<option value="'+ q +'"' + (q == qObj.cur[i]?' selected="selected"': '') + '>' + qObj.arr[q] + '</option>';
          }
          $(this).html(html);
        });
      });
    
    })
    </script>
    密保1:<select style="180px"></select><br/>
    密保2:<select style="180px"></select><br/>
    密保3:<select style="180px"></select>
  • 相关阅读:
    LeetCode偶尔一题 —— 617. 合并二叉树
    《剑指offer》 —— 链表中倒数第k个节点
    《剑指offer》 —— 青蛙跳台阶问题
    《剑指offer》—— 二维数组中的查找
    《剑指offer》—— 替换空格
    《剑指offer》—— 合并两个排序的链表
    《剑指offer》—— 礼物的最大价值
    生成Nuget 源代码包来重用你的Asp.net MVC代码
    Pro ASP.Net Core MVC 6th 第四章
    Pro ASP.NET Core MVC 6th 第三章
  • 原文地址:https://www.cnblogs.com/pangblog/p/3262975.html
Copyright © 2011-2022 走看看