почему мой второй раскрывающийся список копирует действие изменения моего первого раскрывающегося списка

Question

У меня есть 2 раскрывающихся списка, которые имеют ту же функцию в onchange, где, если я выбираю Сделать экспресс-платеж, он должен показывать модальный экспресс-платеж, но проблема в том, что второе раскрывающееся меню просто копирует действие первого раскрывающегося списка.

<div class="sample" data-key="1001">
    <form class="form" id="form-1001">
    <select class="form-control">                                                                                                                                
        <option value="1">1</option>
        <option value="2">2</option>                                                                                                                                            
        <option value="express">Make Express Payment</option>
    </select>
    </form>
</div>
<div class="sample" data-key="1002">
    <form class="form" id="form-1002">
    <select class="form-control">                                                                                                                                
        <option value="1">1</option>
        <option value="2">2</option>                                                                                                                                            
        <option value="express">Make Express Payment</option>
    </select>
    </form>
</div>

например

• 1-й drpdwn = 1
• 2nd drpdwn = сделать экспресс-кнопку

в сценарии будет второй выпадающий список, не будет отображаться модальное значение, но если

• 1-й drpdwn = сделать экспресс-кнопку (покажет модал)
• 2-й drpdwn = 1

результатом будет 2-й выпадающий список, также покажет модал, который, как предполагается, не отображается.

вот код jquery $(this).data('key') равен 1002 или 1003.

$( ".sample" ).each(function() {
    alert($(this).data('key'));
    $( "#form-"+$(this).data('key')).change(function() {
        if ($("option:selected"). val() === "express") {
            $('#express-payment-modal').modal('show');
        }
      });
});

Answer 1

Вы используете универсальный селектор jQuery в функции изменения - $("option:selected") это даст вам два элемента в массиве. когда есть вызов val (), он дает вам значение 1-го элемента в массиве. Попробуйте это -

`$( "#form-"+$(this).data('key')).change(function(e) {
    if (e.target.value === "express") {
     //...
    }
 });