.on('change', '#ss1')

HTML

<div id="s1" class="center" style="margin-bottom:15px; margin-right:10px;">
            <select name="sources" id="ss1" class="custom-select sources" placeholder="カテゴリ[1] 選択">
                    <option value="">-</option>
                        <option value="rent">不動産賃貸</option>
                        <option value="purchase">不動産購入</option>
                        <option value="others">その他</option>
            </select>
</div>
<div id="s21" class="center" style="margin-bottom:15px;margin-right:10px;">
            <select name="sources" id="ss21" class="custom-select sources" placeholder="カテゴリ[2] 選択">
                    <option value="">-</option>
                        <option value="house">一戸建て</option>
                        <option value="condominium21">マンション</option>
                        <option value="apartment">アパート</option>
                        <option value="others21">その他</option>
            </select>
</div>

<ul>
 <li><a href="https://teratail.com/questions/82989">JavaScript - changeをselectを監視してイベントが発生したらshow();させたいのですが(82989)｜teratail</a></li>
</ul>

JavaScript

'use strict';
$(function(){
    $('#s21,#s22,#s31').hide();


$(document).on("change", '#ss1', function(){
  var s1 = $('#ss1').val();
  if (s1=="rent") {
    $('#s21').show();
  }
})
});