I have this 2 dropdown which have the same function in onchange where if i Select Make Express Payment it should be able to show a modal of express payment but the problem is that the second dropdown is just copying the action of the first dropdown
<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>
for example
- 1st drpdwn = 1
- 2nd drpdwn = make express button
the scenario will be the second dropdown will not show the modal but if
- 1st drpdwn = make express button (will show the modal)
- 2nd drpdwn = 1
the result will be the 2nd dropdown will also show the modal supposed to be not show.
here is the jquery code $(this).data('key')
is 1002 or 1003 .
$( ".sample" ).each(function() {
alert($(this).data('key'));
$( "#form-"+$(this).data('key')).change(function() {
if ($("option:selected"). val() === "express") {
$('#express-payment-modal').modal('show');
}
});
});