选择引导选择选择器的选项后，无法从 javascript 动态触发 onchange 事件答案

【问题标题】：Not able to fire onchange event dynamically from javascript after selecting options of bootstrap selectpicker选择引导选择选择器的选项后，无法从 javascript 动态触发 onchange 事件
【发布时间】：2018-03-21 08:38:51
【问题描述】：

我正在使用 javascript 代码来选择一个关于身体负载的选项，如 sn-p 所示。这对我来说很好。我在下一步中面临的问题是，一旦在 selectpicker 中选择了值，我就无法动态调用 onchange 事件。

编写我编写的代码以动态选择选项

$('select[name=pname]').val(pnamea);
$('.selectpicker').selectpicker('refresh');

在此之后，我将一个简单的函数 addcname1 映射到 onchange 事件，该事件会发出所选选项的警报。但这对我不起作用。

提供了更清楚地解释问题陈述的片段。

你能指导我解决我哪里出错了吗？

谢谢

function openmd2(pnamea){
   
    $('select[name=pname]').val(pnamea);
    $('.selectpicker').selectpicker('refresh');
       
    $(document).on('change','.selectpicker',function(){
        addcname1(this.options[this.selectedIndex])
    });
}
    
function addcname1(getval){
    var myname = getval.getAttribute('value');
    alert(myname)
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<body onload="openmd2('1')">
<select class="selectpicker" name="pname">
  <option value="0">select</option>
  <option value="1">Mustard</option>
  <option value="2">Ketchup</option>
  <option value="3">Relish</option>
</select>
</body>

【问题讨论】：

它已经显示带有选定值的警报框
当你选择一个选项时它会显示，但第一个选项没有显示警报，并且在正文加载时选择了此选项。
您的预期结果是什么？在 onLoad 上？
正如您在正文 onload 上看到的那样，我将 1 作为值传递。在选择器中被选中。但未检测到 on-change 事件，因此我无法访问 addcname1 函数

标签： javascript html

【解决方案1】：

在您的代码中，您必须进行一些小的更改才能使其运行。

    $(document).on('change','.selectpicker',function(){
     addcname1(this.options[this.selectedIndex])
      });

 function openmd2(pnamea){


   $('select[name=pname]').val(pnamea).change();
 }

  function addcname1(getval){
       var myname = getval.getAttribute('value');
     alert(myname)
 }

在这里，我刚刚将 $('select[name=pname]').val(pnamea) 更改为 $('select[name=pname]').val(pnamea).change();让它运行

你可以参考这个来得到准确的答案 https://jsfiddle.net/Sakshigargit15/j4ccdeaq/17/

【讨论】：

【解决方案2】：

它不会给你警报。这样理解。

1- 默认情况下，您将从function openmd2(pnamea) 的前两行中选择值1，这将在您的onLoad() 上调用。

2-现在在第三行，它得到一个调用来监视onChange 事件。

$(document).on('change','.selectpicker',function(){
        addcname1(this.options[this.selectedIndex])
    });

3- 因此继续前进，如果您更改下拉菜单，您将收到警报。但不是第一次（您的onload），因为没有听众在等待它的更改。

AFAIK，它就像你写的那样工作。

【讨论】：

感谢您的回复，我们不能使用除了更改以外的任何其他事件，以便如果选项得到动态选择的事件将被触发。
必须有一个listener 监听事件才能给你一个响应。因此，理想情况下，您应该在设置第一个值（默认值）之前让一个侦听器进行侦听。
谢谢它的工作。我只是像这样更改了我的代码 $('select[name=pname]').val(pnamea).change();
很高兴知道！如果答案对您有帮助，请将答案标记为已接受。如果可能的话，也点赞。谢谢。