Remove a drop down item if it is selected - php

Question

I have multiple instances of select drop downs on a form, eight to be exact. If I select a number on the first select drop down I want to hide the selected number from the second select drop down up to eighth.
For the purpose of this I will only show two of the eight select drop downs.
View Code -
Select drop down one -
<div class="col-xs-12 col-sm-3">
<div class="form-group">
<?php echo Form::label('test_id', 'Test', array('class' => 'col-xs-3 control-label')) ?>
<div class="col-xs-9">
<select name="test_id" id="test_id" class="form-control select2" data-placeholder="Select...">
<option value=""></option>
<?php foreach (ORM::factory('Test')->order_by('id')->find_all() as $row) : ?>
<option value="<?php echo $row->id ?>"
<?php if ($b->id == $row->id) echo 'selected="selected"' ?>>
<?php echo $row->id ?></option>
<?php endforeach ?>
</select>
</div>
</div>
Select drop down two-
<div class="col-xs-12 col-sm-3">
<div class="form-group">
<?php echo Form::label('test_id', 'Test', array('class' => 'col-xs-3 control-label')) ?>
<div class="col-xs-9">
<select name="test_id" id="test_id" class="form-control select2" data-placeholder="Select...">
<option value=""></option>
<?php foreach (ORM::factory('Test')->order_by('id')->find_all() as $row) : ?>
<option value="<?php echo $row->id ?>"
<?php if ($b->id == $row->id) echo 'selected="selected"' ?>>
<?php echo $row->id ?></option>
<?php endforeach ?>
</select>
</div>
</div>
jQuery Code -
var $selects = $('select');
$('select').change(function () {
$('option:hidden', $selects).each(function () {
var self = this,
toShow = true;
$selects.not($(this).parent()).each(function () {
if (self.value == this.value) toShow = false;
})
if (toShow) $(this).show();
});
if (this.value != "") //to keep default option available
$selects.not(this).children('option[value=' + this.value + ']').hide();
});
This does not work in the slightest.
Any help would be appreciated.
Cheers

Answer 1

This won't work with select2 and hidden options. You can work around this by disabling the options and a bit of CSS to hide them. See below:
JS
$(document).ready(function () {
var $selects = $('select');
$selects.select2();
$('select').change(function () {
$('option:hidden', $selects).each(function () {
var self = this,
toShow = true;
$selects.not($(this).parent()).each(function () {
if (self.value == this.value) toShow = false;
})
if (toShow) {
$(this).removeAttr('disabled');
$(this).parent().select2();
}
});
if (this.value != "") {
$selects.not(this).children('option[value=' + this.value + ']').attr('disabled', 'disabled');
$selects.select2();
}
});
})
CSS
.select2-results .select2-disabled {
display:none;
}
Working example here: http://jsfiddle.net/10nwqwck/4/

Answer 2

Something like this might work :
$(".select").click(function () {
var value = $(this).val();
// to hide every option that have the selected value
$("option").filter(function() {
return $(this).val() == value;
}).hide();
// to show the option currently selected in the current list
$(this).find("option").each(function () {
if ($(this).val() == value)
{
$(this).show();
}
});
});
Hope this help.

Answer 3

$("#Select_id").blur(function () {
var value = $(this).val();
alert($("#Select_id").val() == value);
// to hide every option that have the selected value
if ($("#Select_id").val() == value) {
$("#Option_id"+value).hide();
}
});
Try this
you can remove the selected item from the drop doen like this simply. dropdown id is 'Select_id' and selected option id need to be 'Option_id'. if not equel both then selected option will be remove

Answer 4

Cheers Vlad, that worked mate.
To make the jQuery more optimized, this was done.
$(document).ready(function () {
var $selects = $('select');
$selects.select2();
$('select').change(function () {
$('option:hidden', $selects).each(function () {
var self = this,
toShow = true;
$selects.not($(this).parent()).each(function () {
if (self.value == this.value) toShow = false;
})
if (toShow) {
$(this).removeAttr('disabled');
}
});
if (this.value != "") {
$selects.not(this).children('option[value=' + this.value + ']').attr('disabled', 'disabled');
}
});
})
Thank you for your help :)