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

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值来更改相应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 2

我将用于这类功能的方法

该方法允许您有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>

Answer 3

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

一旦你完成了这项工作，我只需要在选项值和你想要显示/隐藏的元素的ID之间创建一个简单的映射，并将其用作查找来切换正确的类。