使用JavaScript模拟HTML选择选项的点击

Question

我正在尝试使用复选框在HTML select元素中选择一个选项。我几乎可以正常使用了，并且可以在此处看到正在运行的演示-https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants-如果您选中标记为“自行车夹”或“红色安全灯”的复选框，您会看到上面逐渐消失的选择框发生了变化。

但是，价格应该发生变化，当将商品添加到购物车时，应包括这些“附加组件”，但不包括。如果您使用鼠标手动选择下拉菜单，则将看到其工作方式。

我正在使用的javascript的简化版是：

$("select :nth-child(2)").prop('selected', true).trigger('change');

有没有一种方法可以模拟在这种情况下有效的点击？

我在另一个线程上找到了这段代码，并且当jquery触发器或click无效时，它可以工作。但是，我已经尝试过了，但是也没有用。

$(function() {
    $('a').click(function() {
        // 'this' is not a jQuery object, so it will use
        // the default click() function
        this.click();
    }).click();
});

非常感谢您的帮助！

Answer 1

如果选择复选框而不是选择框选项，则使用以下代码。

例如：HTML：

<div>
<select id="newselect" name="newselect">
  <option value="newoptionone">New Option One</option>
  <option value="newoptiontwo">New Option Two</option>
  <option value="nothing" selected="selected">Nothing</option>
</select>
</div>
<div>
<input id="newcheckbox" name="newcheckbox" type="checkbox" value="1"/>New Checkbox
</div>

Javascript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
          // $("#newselect option:eq(1)").val("nothing");
           $("#newselect").val($("#newselect option:eq(1)").val());
        }
        else if($(this).prop("checked") == false){
            $("#newselect").val($("#newselect option:eq(2)").val());
        }
    });
});
</script>