目的:三个select下拉框中的内容相同,当其中一个下拉框选中了其中一个值后,隐藏掉另外两个下拉框中相同的值。
html:
<div class="selectaccount">
<h4 class="page_title"><?php echo Yii::t('manager', 'Select Accounts'); ?></h4>
<select>
<option value='select1'><?php echo Yii::t('manager', 'Select') ?></option>
<?php foreach ($accounts as $key => $account) : ?>
<option value='<?php echo $account['id']; ?>'><?php echo $account['name']; ?></option>
<?php endforeach; ?>
</select>
<select>
<option value='select2'><?php echo Yii::t('manager', 'Select') ?></option>
<?php foreach ($accounts as $key => $account) : ?>
<option value='<?php echo $account['id']; ?>'><?php echo $account['name']; ?></option>
<?php endforeach; ?>
</select>
<select>
<option value='select3'><?php echo Yii::t('manager', 'Select') ?></option>
<?php foreach ($accounts as $key => $account) : ?>
<option value='<?php echo $account['id']; ?>'><?php echo $account['name']; ?></option>
<?php endforeach; ?>
</select>
<button class="btn" id="compare"><?php echo Yii::t('master', 'Compare'); ?></button>
</div>
js:
<script>
//下拉框联动互斥
$('.selectaccount select').change(function () {
var strchecked = new Array();
$('.selectaccount select').each(function () {
strchecked[$(this).index()] = $(this).val();
});
//console.log(strchecked);
$(this).siblings().find('option').each(function () {
if (($(this).attr('value') == strchecked[0] || $(this).attr('value') == strchecked[1] || $(this).attr('value') == strchecked[2]) && ($(this).index() != 0 && $(this).attr('value') != $(this).parents('select').val())) {
$(this).hide();
} else {
$(this).show();
}
});
});
</script>