javascript - 根据所选项目删除所选项目

Question

我有两个选择元素，时间为上午 12:00 到晚上 11:45，

两个选择都具有相同的选项，包括文本和值。例如，是否可以说我在第一次选择时选择下午 1:00 以在第二次选择时在下午 1:00 之前删除所有选项？我知道我可以用 jquery 检测到变化

$('#select1').change(function(){

// in here do something to remove previous selects

});

任何帮助将不胜感激。

Answer 1

这是相同的另一个版本，我们允许用户更改他的第一个选择并仍然正确过滤第二个选择

$(document).ready(function() {
  var to_mins = function(x) {
    var p = x.split(':').map(function(v) { return parseInt(v, 10); });
    return (p[0] * 60) + p[1];
  };
  $('#second').data('options', $('#second').find('option').toArray());
  $('#first').change(function() {
     var val = to_mins(this.value);
     console.log(val);
     $('#second').empty();
     $('#second').data('options').filter(function(v) {
       return to_mins(v.value) > val;
     }).map(function(v) {
       $('#second').append(v.cloneNode(true));
     });
  });
});

Answer 2

尝试

$('#select1').change(function(){
    var $this = $(this);
    var index = $('option:selected', $this).index();
    $('#select2 option').show().filter(':lt(' + index + ')').hide();
})

演示：小提琴

Answer 3

尝试这个

$('#select1').change(function(){

 var value = $(this).val();
 $("#selectId > option").each(function() {
   if(value > this.value)
      $("#selectId  option[value=this.value]").remove();       
 });    
});

但是选择框的值需要按升序排列

Answer 4

HTML：

<select id="select1">
  <option value="1">11h00</option>
  <option value="2">11h15</option>
  <option value="3">11h30</option>
  <option value="4">11h45</option>
  <option value="5">12h00</option>
  <option value="6">12h15</option>
  <option value="7">12h30</option>
  <option value="8">12h45</option>
  <option value="9">13h00</option>
</select>

<select id="select2">
   <option value="1">11h00</option>
  <option value="2">11h15</option>
  <option value="3">11h30</option>
  <option value="4">11h45</option>
  <option value="5">12h00</option>
  <option value="6">12h15</option>
  <option value="7">12h30</option>
  <option value="8">12h45</option>
  <option value="9">13h00</option>
</select>

JS：

$(document).ready( function(){
  $('#select1').change(function(){
    var val = $(this).find('option:selected').prop('value');

    $('#select2').find('option').show().each(function(){
      if( $(this).prop('value') <= val ){
        $(this).hide();
      }
      else{
        return false;
      }
    });
  });
});