javascript - Jquery 希望触发选择框更改

Question

嘿，我有一个长方法绑定(bind)到它的选择框html 中的选择框如下所示:

HTML:

<select id="select1">
  <option>First select Advertiser</option>
  <?php
     buildSelectOptionsFromPagination();  // Dynamically build the options list
  ?>
</select> 

Javascript:

$('#select1').change(function(){
                alert('#select1');
                $('#innerP').remove();
                $('#innerH').remove();
                $('#waitmsg').append('  ...</h2></p>');
                $("#show_c ").attr("disabled", true);   


                 $.ajax({
                        url: 'observer.php',
                        data: "ctrl=in&v_id="+v_id,
                        success: function(data) {
                             var newData = "<option id=\"firstopt_insert\"> blah blah <\/option>" + data;
                             $('#in111').html(data);
                             $('#in222').trigger('change');

                        },
                        error: function (request, status, error) {
                            alert(request.responseText+"\nThere was an server error please refresh the page 1 ");
                        }                           
                });
            });

现在我尝试触发这个选择框更改方法但没有成功从外面我触发 2 方法，1. 通过索引选择选项，效果很好:

$('#select1 option')[5].selected = true;

2 现在我想像这样触发更改方法但没有成功:

$('#select1').trigger('change');
or 
$('#select1').bind('change', function(){ ; });

它只是不触发任何东西，为什么？

Answer 1

Change 事件在用户选择一个选项时被触发。当您通过 jQuery val() 方法或通过将选项的 selected 属性设置为 true 来设置值时，它不会被触发。所以你必须手动触发更改事件。

你的代码

$('#select1').trigger('change');

应该可以。也许，这不是因为你的代码引发了错误。这可能发生在这个地方

$('#select1 option')[5].selected = true;

因为在这里您不执行数组的范围检查。

更好的方法是像这样通过索引选择需要的选项:

$('#select1 > :nth-child(6)').prop('selected', true);

如果没有第 6 个选项，这样代码就不会崩溃。

然而，这 fiddle ，根据您的示例构建，工作正常。