How to create a custom dropdown to change the content

Question

I have a custom dropdown and

<div class="title__area">
                    <div class="custom-select payment__method">
                      <select>
                        <option value="0">ÖDEME TİPİ</option>
                        <option value="1" class="transfer-selected">Havale - EFT</option>
                        <option value="2" class="credit-card-selected">Kredi Kartı</option>
                      </select>
                    </div>
                  </div>
                  <div class="row" id="credit-card-selected">
                   
                  </div>
                  <div class="row" id="transfer-selected">
                    </div>

And what I am trying to achieve, so if the user selects value 1 which is transfer-selected in this case, I want to show this:

<div class="row" id="transfer-selected">
                    </div>

And if the user selects value 2 which is credit-card-selected in this case, I want to show this:

<div class="row" id="credit-card-selected">

                  </div>

My javascript is like this but it doesn't work like I expected:

$(".credit-card-selected").click(function () {
  $(".credit-card-selected").removeClass("selected");
  $(this).addClass("selected");
});

$(".transfer-selected").click(function () {
  $(".transfer-selected").removeClass("selected");
  $(this).addClass("selected");
});

And here is my css:

.new__order__choice .credit-card-selected {
  display: none;
}

.new__order__choice .credit-card-selected.selected {
  display: block;
}

.new__order__choice .transfer-selected {
  display: none;
}

.new__order__choice .transfer-selected.selected {
  display: block;
}

Do you see the reason,

$(".credit-card-selected").click(function() {
  $(".credit-card-selected").removeClass("selected");
  $(this).addClass("selected");
});

$(".transfer-selected").click(function() {
  $(".transfer-selected").removeClass("selected");
  $(this).addClass("selected");
});

.new__order__choice .credit-card-selected {
  display: none;
}

.new__order__choice .credit-card-selected.selected {
  display: block;
}

.new__order__choice .transfer-selected {
  display: none;
}

.new__order__choice .transfer-selected.selected {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title__area">
  <div class="custom-select payment__method">
    <select>
      <option value="0">ÖDEME TİPİ</option>
      <option value="1" class="transfer-selected">Havale - EFT</option>
      <option value="2" class="credit-card-selected">Kredi Kartı</option>
    </select>
  </div>
</div>
<div class="row" id="credit-card-selected">
 Credit Card
</div>
<div class="row" id="transfer-selected">
  Transfer
</div>

Answer 1

You want to use the "change" event of the select

Here is a version using the value of the select to change the corresponding div

$("#paymentOptions").on("change", function() {
  $(".row")
    .hide()
    .eq(this.value - 1).show()
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title__area">
  <div class="custom-select payment__method">
    <select id="paymentOptions">
      <option value="0">ÖDEME TİPİ</option>
      <option value="1">Havale - EFT</option>
      <option value="2">Kredi Kartı</option>
    </select>
  </div>
</div>
<div class="row hide" id="transfer-selected">
  Transfer
</div>
<div class="row hide" id="credit-card-selected">
  Credit Card
</div>