<div class="l-wrap">
  <div>
    <label>項目名</label>
    <select class="js-form-disp-switch" name="" data-switchvalue="swicthvalue" data-target=".js-form-disp-tgt">
      <option value="" disabled="" selected="" style="display:none;">選択してください</option>
      <option value="">選択肢1</option>
      <option value="">選択肢2</option>
      <option value="swicthvalue">表示切り替え選択肢</option>
    </select>
  </div>

  <div class="js-form-disp-tgt" style="display:none;">
    <label for="f-input-other">「表示切り替え選択肢」が選ばれたので表示します</label>
    <input type="text" name="" value="" size="60" class="js-form-disp-input" id="f-input-other" placeholder="「表示切り替え選択肢」以外に切り替えるとここの値が空になります">
  </div>
</div>









<!-- 複数設置 -->
<div class="l-wrap">
  <div>
    <label>項目名</label>
    <select class="js-form-disp-switch" name="" data-switchvalue="swicthvalue" data-target=".js-form-disp-tgt2">
      <option value="" disabled="" selected="" style="display:none;">選択してください</option>
      <option value="">選択肢1</option>
      <option value="">選択肢2</option>
      <option value="swicthvalue">表示切り替え選択肢</option>
    </select>
  </div>

  <div class="js-form-disp-tgt2" style="display:none;">
    <label for="f-input-other">「表示切り替え選択肢」が選ばれたので表示します</label>
    <input type="text" name="" value="" size="60" class="js-form-disp-input" id="f-input-other" placeholder="「表示切り替え選択肢」以外に切り替えるとここの値が空になります">
  </div>
</div>

.l-wrap {
  background: #eee;
  padding: 30px;
  max-width: 100%;
  width: 400px;
  margin: 30px auto;
  > div:not(:first-child) {
    margin-top: 40px;
  }
}
select,
input {
  max-width: 100%;
  line-height: 30px;
  height: 30px;
}

$(function() {

  $('.js-form-disp-switch').change(function () {
    let selectVal = $(this).val();
    let switchVal = $(this).data('switchvalue');
    let hideTgt = $(this).data('target');
    let targetInput = $(hideTgt).find('.js-form-disp-input');
    if ( selectVal == switchVal ) {
      $(hideTgt).slideDown();
    } else {
      $(hideTgt).slideUp();
      targetInput.val('');
    }
  });
});