检查选择框选项是否重复超过特定时间

时间:2018-05-14 18:43:52

标签: javascript jquery

我有一个包含html的表单:

var mouseX = 0,
  mouseY = 0,

  windowHalfX = window.innerWidth / 2,
  windowHalfY = window.innerHeight / 2,

  SEPARATION = 200,
  AMOUNTX = 10,
  AMOUNTY = 10,

  camera, scene, renderer;

init();
animate();

function init() {

  var container, separation = 100,
    amountX = 50,
    amountY = 50,
    particles, particle;

  var container = document.getElementById('canvas_3d');
  // container = document.createElement('div');
  // container.className = "canvas_3d" 
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 100;

  scene = new THREE.Scene();

  renderer = new THREE.CanvasRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  // particles

  var PI2 = Math.PI * 2;
  var material = new THREE.SpriteCanvasMaterial({

    color: 0xffffff,
    program: function (context) {

      context.beginPath();
      context.arc(0, 0, 0.5, 0, PI2, true);
      context.fill();

    }

  });

  var points = [];

  for (var i = 0; i < 100; i++) {

    particle = new THREE.Sprite(material);
    particle.position.x = Math.random() * 2 - 1;
    particle.position.y = Math.random() * 2 - 1;
    particle.position.z = Math.random() * 2 - 1;
    particle.position.normalize();
    particle.position.multiplyScalar(Math.random() * 10 + 450);
    particle.scale.x = particle.scale.y = 10;
    scene.add(particle);

    points.push(particle.position);
  }

  // lines

  var geometry = new THREE.BufferGeometry().setFromPoints(points);

  var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0xffffff,
    opacity: 0.5
  }));
  scene.add(line);

  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('touchstart', onDocumentTouchStart, false);
  document.addEventListener('touchmove', onDocumentTouchMove, false);

  //

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

//

function onDocumentMouseMove(event) {

  mouseX = event.clientX - windowHalfX;
  mouseY = event.clientY - windowHalfY;

}

function onDocumentTouchStart(event) {

  if (event.touches.length > 1) {

    event.preventDefault();

    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;

  }

}

function onDocumentTouchMove(event) {

  if (event.touches.length == 1) {

    event.preventDefault();

    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;

  }

}

//

function animate() {

  requestAnimationFrame(animate);

  render();

}

function render() {

  camera.position.x += (mouseX - camera.position.x) * .05;
  camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
  camera.lookAt(scene.position);

  renderer.render(scene, camera);

}

我需要当具有“select1”类的选择框具有重复两次以上的月份值时禁用具有“结果”类的选择框 我尝试了以下方法:

<input class="empcode" type="text">

<!--this select box options is fielled out from database but for example 
 data like this -->

<select class="select1">
 <option value ="05-2018">05-2018</option>
 <option value ="05-2018">05-2018</option>
 <option value ="06-2018">05-2018</option>
</select>

<select class="result">
 <option value= "1">1</option>
 <option value= "1">1</option>
 <option value= "1">1</option>
</select>

任何帮助!!

2 个答案:

答案 0 :(得分:1)

这将隐藏&#34; .result&#34;如果&#34; .select1&#34;有两个以上的选项。

&#13;
&#13;
$('.select1 option').each(function (k,v) {
  var value = $(v).attr('value');
  var SameValue = $('.select1 option[value=' + value + ']');
  if(SameValue.length > 2){
    $('.result').hide();
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="empcode" type="text">

<!--this select box options is fielled out from database but for example 
 data like this -->

<select class="select1">
 <option value ="05-2018">05-2018</option>
 <option value ="05-2018">05-2018</option>
 <option value ="05-2018">05-2018</option>
</select>

<select class="result">
 <option value= "1">1</option>
 <option value= "1">1</option>
 <option value= "1">1</option>
</select>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

尝试以下

 function HasDuplicateValues() {
            var Duplicates = false;
            $('select[class=select1] option').each(function () {
                var $SameValue = $('select[class=select1] option[value=' + $(this).val() + ']');
                Duplicates = $SameValue.length > 2;
                if(Duplicates)//if appears more than 2 times
                {
                    $('select[class=result]').prop('disabled', 'disabled'); //disable result select
                }
            });

}