CODEWITHSUNDEEP
javascriptjqueryhtml
user541597
user541597

Reputation: 4345

Removing select items depending on selected items

I have two select elements with times 12:00 AM through 11:45 PM,

both selects have the same options inside including text and value. Is it possible for example say I select 1:00 PM on the first select to remove all the options before 1:00 PM on the second select? I know I can detect the change with jquery

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

// in here do something to remove previous selects

});

Any help would be appreciated it.

Upvotes: 1

Views: 84

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

Demo: Fiddle

Upvotes: 1

shyam
shyam

Reputation: 9368

Here is another version of the same where we allow for the user to change his first selection and still filter the second select correctly

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

Upvotes: 1

RRikesh
RRikesh

Reputation: 14381

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

Upvotes: 0

PSR
PSR

Reputation: 40318

try this

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

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

But the values need to be in ascending order for select boxes

Upvotes: 0

Related Questions