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>
  • 相关阅读:
    可持久化线段树学习笔记
    P1084 疫情控制
    Educational Codeforces Round 71 (Rated for Div. 2)
    Codeforces Round #587 (Div. 3)
    luogu P1886滑动窗口
    Codeforces Round #574 (Div. 2)
    luogu P1880 [NOI1995]石子合并
    [JZOJ3521]道路覆盖--状压DP
    [NOIP2018模拟赛10.19]只会暴力报告
    [NOIP2018模拟赛10.18]自闭报告
  • 原文地址:https://www.cnblogs.com/pangblog/p/3262975.html
Copyright © 2011-2022 走看看