how to show div after selecting it in select in drop-down?

below is my code

```js
  $(document).ready(function(){
    $('#selectoption').on('change', function() {
      if ( this.value == '0'){
        $("#option0").show();
      }
      else  if ( this.value == '1')
      {
        $("#option1").show();
      }
       else
      {
        $("#option2").show();
      }
    });
});
```

```css
#option0,
#option1,
#option2 {
    display: none;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-12">
    <select id="selectoption">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>

<div class="row">
    <div class="col-4">
        <div id="option0">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option1">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>

    <div class="col-4">
        <div id="option2">
            <p class="content">Lorem ipsum... Example...</p>
        </div>
    </div>
</div>
```

the code works, but I want the div to be hidden if another one was selected + the code to be scalable - i.e. without 10 else when there are 10 divs