我在表单上有多个选择下拉列表的实例,确切地说是八个。如果我在第一个选择下拉列表中选择了一个数字,我想从第二个选择下拉列表中隐藏所选的数字,直到第八个。
为此,我将仅显示八个选择下拉列表中的两个。
查看代码-
选择下拉菜单-
<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();
});
丝毫不起作用。
任何帮助将不胜感激。
欢呼声
这不适用于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/
类似的事情可能会起作用:
$(".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();
}
});
});
希望获得帮助。
与同事打过交道的弗拉德。
为了使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');
}
});
})
谢谢您的帮助:)
$("#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();
}
});
尝试一下您可以像这样简单地从下拉菜单中删除所选项目。下拉ID为“ Select_id”,所选选项ID为“ Option_id”。如果两者均不相等,则将删除选定的选项