why does my second dropdown is copying the change action of my first dropdown

问题: 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...

问题:

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');
        }
      });
});

回答1:

You are using a generic jQuery selector in the change function - $("option:selected") this will give you two elements in array. when there is val() call, it gives you value of the 1st element in the array. Try this -

`$( "#form-"+$(this).data('key')).change(function(e) {
    if (e.target.value === "express") {
     //...
    }
 });
  • 发表于 2018-07-07 16:05
  • 阅读 ( 265 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除