How to hide select option after click?

Question

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

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.

How to use this?

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.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-select">
                <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-select">
                <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-select">
                <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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("#roomOne").on("change",function(){
        value = $(this).attr("data-value");
        $("#roomTwo"+value).hide();
        $("#roomThree"+value).hide();
    });
</script>
</body>
</html>

This might answer your question: https://stackoverflow.com/questions/56115837/how-do-i-disable-hide-or-remove-selected-option-in-other-selects-with-the-same — Carsten Massmann, Sep 11 '21 at 08:35
@CarstenMassmann , Thanks, But I want to hide, I don't want it to be disabled. — , Sep 11 '21 at 08:47
In case you want to hide (remove) the options you should have a look at this: https://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser — Carsten Massmann, Sep 11 '21 at 09:09

score 1 · Answer 1 · answered Sep 11 '21 at 08:50

The comments in the code should be enough to understand.

$(document).ready(function() {
  
  // Fire on load page
  checkRoomOne();
  
  $("#roomOne").on("change",function(){
  
      // Fire on room 1 change
      checkRoomOne();
      
  });
  
});

function checkRoomOne() {

  // Reset romms 2/3
  $('#roomTwo option').show();
  $('#roomThree option').show();

  // Get value of selected room 1
  value = $("#roomOne option:selected").attr("data-value");
      
  // Hide same value on rooms 2/3
  $('#roomTwo option[data-value="' + value + '"]').hide();
  $('#roomThree option[data-value="' + value + '"]').hide();
  
  
  
  // #### BONUS if is selected: select next or if it  is last, select first
  nextOrFirst(value, '#roomTwo');
  nextOrFirst(value, '#roomThree');


}

function nextOrFirst(value, optionID) {
  
  // if hidden option is selected, select next
  if ($(optionID + ' option[data-value="' + value + '"]:selected').length > 0) {
    
    // if next not exists...
    if ($(optionID + ' option[data-value="' + value + '"]:selected').next().length == 0) {
      // select first 
      $(optionID + ' option').first().prop('selected', true);
    } else {
      // Select next 
      $(optionID + ' option[data-value="' + value + '"]:selected').next().prop('selected', true);
    }
  
  }
  
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.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-select">
                <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-select">
                <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-select">
                <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>

</body>
</html>

@irankhostravi Explain your question better, I probably didn't understand your goal. My code makes room 1 selection invisible in rooms 2 and 3. Wasn't that what you were trying to do? — Baro, Sep 11 '21 at 11:12

How to hide select option after click?

1 Answers1