javascript - 使用javascript模拟HTML选择选项的点击(Use javascript to simulate a click on HTML select option)

Question

I am trying to use checkboxes to select an option in an HTML select element.(我正在尝试使用复选框在HTML select元素中选择一个选项。)

I have it NEARLY working and a working demo can be seen here - https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants - if you tick the checkboxes marked "Cycling Clips" or "Red Safety Light" - you can see that the faded out select boxs above change.(我已经几乎工作和工作演示可以在这里看到- https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants -如果你打勾标记为“自行车夹”或“复选框红色安全灯”-您可以看到上面的淡出选择框发生了变化。) However, the price should change and when the item is added to cart, these "Add-ons" should be included - but they are not.(但是，价格应该有所变化，并且当将商品添加到购物车时，应该包括这些“附加组件”，但实际上没有。) If you select the dropdowns manually using your mouse, you will see how it should work.(如果您使用鼠标手动选择下拉菜单，则将看到其工作方式。) A simplified version of the javascript I am using is:(我使用的javascript的简化版本是：) $("select :nth-child(2)").prop('selected', true).trigger('change'); Is there a way to simulate a click that will work in this instance?(有没有一种方法可以模拟这种情况下的点击？) I found this piece of code on another thread and it worked when a jquery trigger or click would not work.(我在另一个线程上找到了这段代码，并且当jQuery触发器或单击不起作用时，它可以工作。) However, I 've tried this and it didn't work either.(但是，我已经尝试过了，但是也没有用。) $(function() { $('a').click(function() { // 'this' is not a jQuery object, so it will use // the default click() function this.click(); }).click(); }); Any help is greatly appreciated!(任何帮助是极大的赞赏！)   ask by diarmuids translate from so

Answer 1

Use below code for if you checked checkbox than select box option is selected.(如果您选中了复选框而不是选择框选项，请使用以下代码。)

For example: HTML:(例如：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:(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>