当前位置 : 主页 > 网络编程 > JavaScript >

JQ实现三个Select下拉框互斥

来源:互联网 收集:自由互联 发布时间:2021-07-03
三个select下拉框中的内容相同,当其中一个下拉框选中了其中一个值后,隐藏掉另外两个下拉框中相同的值。 1. [代码] [JavaScript]代码 div class="selectaccount" h4 class="page_title"?php echo Yii::t(
三个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>
网友评论