如何创建自定义下拉列表以更改内容

Question

我有一个自定义下拉菜单并且

<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>

以及我想要实现的目标，所以如果用户选择值 1，在这种情况下是转移选择的，我想展示这个：

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

如果用户在这种情况下选择信用卡选择的值 2，我想显示：

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

                  </div>

我的 javascript 是这样的，但它没有像我预期的那样工作：

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

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

这是我的 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;
}

你明白原因了吗，

$(".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

看来您只是挂入了错误的事件。更常见的方法是在 <select> 上使用 change 事件，从 event.target.value 中获取选定的值，并根据该值进行操作。

一旦你完成了这项工作，我将在选项值和你想要 show/hide 的元素的 ID 之间创建一个简单的映射，并将其用作查找以切换正确的 class.

Answer 2

您想使用 select

的“更改”事件

这里是使用select的值来改变对应的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>

Answer 3

我将用于实现此类功能的方法

此方法允许您拥有 N transfer 或 credit-card 个银行

const 
  theSelect = document.querySelector('div.payment__method > select')
, thePMI    = document.querySelector('div#payment-method-information')

theSelect.onchange = e =>
  {
  thePMI.className = theSelect.options[theSelect.selectedIndex].dataset.payClass
  }

#payment-method-information > div {
  display: none; 
  }
#payment-method-information.transfer    > div#transfer,
#payment-method-information.credit-card > div#credit-card {
  display: block;
  }

<div class="title__area">
  <div class="custom-select payment__method">
    <select>
      <option value="a"                     > ÖDEME TİPİ   </option>
      <option value="b" data-pay-class="transfer"    > Havale - EFT </option>
      <option value="c" data-pay-class="credit-card" > Kredi Kartı  </option>
      <option value="x" data-pay-class="transfer"    > other transfer  </option>
      
    </select>
  </div>
</div>

<div id="payment-method-information" class="">
  <div class="row" id="credit-card"> credit card information... </div>
  <div class="row" id="transfer"> transfer information... </div>
</div>

如何创建自定义下拉列表以更改内容

How to create a custom dropdown to change the content

html

javascript

css

select

dropdown