单击 select 选择器后如何隐藏 select 选项？

Question

我们这里有三个房间。其中有三个选项。而且这三个选项都是一样的。每个用户可以选择一个。

例如，如果用户名为 John。约翰在第一个房间，如果他选择选项一。二房三房，方案一，躲jQuery.

但没有 selectpicker.

也能正常工作

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.rtl.min.css">
    <link rel="stylesheet" href="css/bootstrap-select.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <label for="roomOne" class="form-label">Room One</label>
            <select name="roomOne" id="roomOne" class="form-control selectpicker">
                <option value="1" data-value="one">One</option>
                <option value="2" data-value="two">Two</option>
                <option value="3" data-value="three">Three</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="roomTwo" class="form-label">Room Two</label>
            <select name="roomTwo" id="roomTwo" class="form-control selectpicker">
                <option value="1" data-value="one">One</option>
                <option value="2" data-value="two">Two</option>
                <option value="3" data-value="three">Three</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="roomThree" class="form-label">Room Three</label>
            <select name="roomThree" id="roomThree" class="form-control selectpicker">
                <option value="1" data-value="one">One</option>
                <option value="2" data-value="two">Two</option>
                <option value="3" data-value="three">Three</option>
            </select>
        </div>
    </div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script>
    const selects = document.querySelectorAll('.form-select');
    selects.forEach((elem) => {
        elem.addEventListener('change', (event) => {
            let values = Array.from(selects).map(select => select.value);
            for (let select of selects) {
                select.querySelectorAll('option').forEach((option) => {
                    let value = option.value;
                    if (value &&  value !== select.value && values.includes(value)) {
                        option.hidden = true;
                        $('.selectpicker').selectpicker('refresh');
                    } else {
                        option.hidden = false;
                    }
                });
            }
        });
    });
</script>
</body>
</html>

Answer 1

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <label for="roomOne" class="form-label">Room One</label>
            <select name="roomOne" id="roomOne" class="form-control selectpicker">
                <option value="1" data-value="one" dataset="pickerone">One</option>
                <option value="2" data-value="two" dataset="pickerone">Two</option>
                <option value="3" data-value="three" dataset="pickerone">Three</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="roomTwo" class="form-label">Room Two</label>
            <select name="roomTwo" id="roomTwo" class="form-control selectpicker">
                <option value="1" data-value="one" dataset="pickertwo">One</option>
                <option value="2" data-value="two" dataset="pickertwo">Two</option>
                <option value="3" data-value="three" dataset="pickertwo">Three</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="roomThree" class="form-label">Room Three</label>
            <select name="roomThree" id="roomThree" class="form-control selectpicker">
                <option value="1" data-value="one" dataset="pickerthree">One</option>
                <option value="2" data-value="two" dataset="pickerthree">Two</option>
                <option value="3" data-value="three" dataset="pickerthree">Three</option>
            </select>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script>
   /* const selects = document.querySelectorAll('.form-select');
    selects.forEach((elem) => {
        elem.addEventListener('change', (event) => {
            let values = Array.from(selects).map(select => select.value);
            for (let select of selects) {
                select.querySelectorAll('option').forEach((option) => {
                    let value = option.value;
                    if (value &&  value !== select.value && values.includes(value)) {
                        option.hidden = true;
                        $('.selectpicker').selectpicker('refresh');
                    } else {
                        option.hidden = false;
                    }
                });
            }
        });
    });*/
$( document ).ready(function() {
 $('.selectpicker').on('change',function() {
        
        
        $("#roomOne option").show();
        $("#roomTwo option").show();
        $("#roomThree option").show();
        
        
        var option = $('option:selected', this).attr('data-value');
        var option1 = $('option:selected', this).attr('dataset');
        
        if(option1 == 'pickerone') {
            $("#roomTwo option[data-value=" + option + "]").hide();
            $("#roomThree option[data-value=" + option + "]").hide();
        }
        if(option1 == 'pickertwo') {
            $("#roomOne option[data-value=" + option + "]").hide();
            $("#roomThree option[data-value=" + option + "]").hide();
        }
        if(option1 == 'pickerthree') {
            $("#roomTwo option[data-value=" + option + "]").hide();
            $("#roomOne option[data-value=" + option + "]").hide();
        }
        $('.selectpicker').selectpicker('refresh');
        
    });
});
</script>
</body>
</html>

嗨 irankhostravi，请。检查一下。

单击 select 选择器后如何隐藏 select 选项？

How to hide select option after click with select picker?

html

javascript

jquery

bootstrap-selectpicker

bootstrap-5