JQ实现三个Select下拉框互斥

最新推荐文章于 2024-05-28 09:45:45 发布

weixin_34358092

最新推荐文章于 2024-05-28 09:45:45 发布

阅读量739

点赞数

文章标签： php javascript python ViewUI

原文链接：https://my.oschina.net/wsyblog/blog/666588

版权

2019独角兽企业重金招聘Python工程师标准>>>

目的：三个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>

转载于:https://my.oschina.net/wsyblog/blog/666588