如何实现JQ三个Select下拉框之间互斥联动？

本文共计364个文字，预计阅读时间需要2分钟。

选择账户 账户1 账户2 账户3 账户1 账户2 账户3 账户1 账户2 账户3

三个select下拉框中的内容相同，当其中一个下拉框选中了其中一个值后，隐藏掉另外两个下拉框中相同的值。

1.[代码][JavaScript]代码

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