CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
sumit
sumit

Reputation: 15464

Ignore 1st option from multiple select box-jquery

I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B

My demonstration

<select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>

 $('.alert_type').change(function() { 
                           var selected_value=$(this).val();
                          $(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();

                          });

But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option

You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception Fiddle https://jsfiddle.net/timus2001/rbuyk7na/3/

When I try with 

$(".alert_type option").show();

to show all at first it is not mutually exclusive any more (see the picture) enter image description here

Upvotes: 1

Views: 833

Answers (2)

Sergio Alen
Sergio Alen

Reputation: 724

Ok. let me see if I get you this time:

 $('.alert_type').change(function() { 
	var selected_values = [],
  		iteration;
  $(".alert_type option").show();
  $(".alert_type").each(function(){
  	iteration = $(this).find('option:selected').val();
    if ( iteration !== "" ) {
    	selected_values.push( iteration );
    } 	
  })
  for ( var i = 0; i < selected_values.length; i++ ) {
  	$(".alert_type option[value='"+ selected_values[i] +"']").hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
        <option selected>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>

Upvotes: 2

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

This is what you need:

$('select.alert_type').on('change keyup',function() {
	var val = $(this).val();
	$('select.alert_type option').prop('disabled',false);
	$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>

Good luck :D

Upvotes: 0

Related Questions