Удалить выпадающий элемент, если он выбран

Question

Удалить выпадающий элемент, если он выбран

У меня есть несколько случаев выбора выпадающих на форме, восемь, если быть точным. Если я выбираю номер в первом выпадающем списке, я хочу скрыть выбранный номер из второго выпадающего списка до восьмого.

Для этого я покажу только два из восьми выпадающих списков.

Посмотреть код —

Выберите выпадающий один —

<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>

Выберите выпадающий

<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 —

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

Это не работает ни в малейшей степени.

Любая помощь будет оценена.

ура

0

jquery kohana php

Решение

Другие решения

Нечто подобное может работать:

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

Надеюсь, это поможет.

0

Приветствия Влад, который работал приятель.

Чтобы сделать jQuery более оптимизированным, это было сделано.

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

})

Спасибо за помощь 🙂

0

Источник

Accepted Answer

Это не будет работать с select2 и скрытыми опциями. Вы можете обойти это, отключив параметры и немного CSS, чтобы скрыть их. Увидеть ниже:

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

Рабочий пример здесь: http://jsfiddle.net/10nwqwck/4/

1