Question

我有两个选择元素，时间是12:00 AM到11:45 PM，

两个选项都包含相同的选项，包括文本和值。例如，我可以选择在第一个选择的1:00 PM选择在第二个选择的下午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();
})

演示：Fiddle

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;
      }
    });
  });
});

根据所选项目删除选择项目

4 个答案: