javascripthtmljquerybootstrap-5bootstrap-selectpicker

How to hide select option after click with select picker?

We have three rooms here. Which has three options. And these three options are the same. Each user can choose one.

demo

For example, if the user is named John. John in the first room, if he chooses option one. In the two room and the three room, option one, hide with jQuery.

But it works without 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>
Solution 

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

    Hi irankhostravi, pls. check it.