"REMOVE PREVIOUS SELECTED VALUE FROM ANOTHER SELECT"
Bootstrap 4.1.1 Snippet by iammohitverma

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<select name="selectBox1" id="selectBox1">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<select name="selectBox2" id="selectBox2">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<select name="selectBox3" id="selectBox3">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$(document).ready(function(){
$('select').on('change', function(event ) {
var prevValue = $(this).data('previous');
$('select').not(this).find('option[value="'+prevValue+'"]').show();
var value = $(this).val();
$(this).data('previous',value); $('select').not(this).find('option[value="'+value+'"]').hide();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Multi Select Tiled Layout
Dynamic Form Fields - Add & Remove BS3
Button Dropdown Select

Questions / Comments: