使用javascript模拟点击HTML选择选项

Question

我正在尝试使用复选框在 HTML 选择元素中选择一个选项。 我几乎可以正常工作，可以在这里看到一个工作演示 - https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants - 如果你勾选标记为“Cycling Clips”或“红色安全灯”——你可以看到上面淡出的选择框发生了变化。

然而，价格应该改变，当商品被添加到购物车时，这些“附加组件”应该包括在内——但它们没有。 如果您使用鼠标手动选择下拉菜单，您将看到它应该如何工作。

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

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

有没有办法模拟在这种情况下有效的点击？

我在另一个线程上找到了这段代码，当 jquery 触发器或点击不起作用时它起作用了。 但是，我已经尝试过了，但也没有用。

$(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>

Java脚本：

<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>

Answer 2

在您选择的事件中，有这样的事情

function() {
  $(this)...
}

也许问题是范围问题，请尝试使用以下方法：

function(e) {
  $(e)...
}

Answer 3

我从您的页面中提取了这个，请原谅奇怪的选择器，但这不在问题范围内。 因此，获取“（”之前的文本，然后使用它来选择正确的选项并触发更改。请注意，由于拼写问题，在本示例中，只有“Cycle Clips”是页面中的有效值。

如果我们在诸如<div class="checkbox-holder" data-option-value="d846e2515b8c7395944a499dbf6015e3">的地方有选项值，那么我们可以let thisval = $(this).data("option-value"); . 我们还可以使用data-target="#option-set-02ec6d9777a31120378034ef57c57359"为“checky”事物添加一个目标，并使用它来找到这个 checky 事物的特定选择。 我编辑添加了第二个在灯光下执行此操作的示例。

 $(function() { $('.w-commerce-commerceaddtocartform').on('click', '.checkbox-holder', function(event) { let desc = $(this).find('.checkbox-label').first().text(); let descValue = desc.substr(0, desc.indexOf(' (')); // console.log("'" + descValue + "'"); // this is the form, we find the selects inside that $(event.delegateTarget).find('select.select.w-select').find('option').filter(':contains(' + descValue + ')').each(function() { $(this).prop('selected', true) // console.log(this); $(this).closest('select').trigger('change'); }); }); // data target and value example $('.w-commerce-commerceaddtocartform').on('click', '.checkbox-holder', function(event) { let selectTarget = $(this).data('target'); let selctValue = $(this).data("check-value"); let isChecked = true; // $(this).find('checkbox-field');// something to detect checked or not $(selectTarget).find('option[value="' + selctValue + '"]').each(function() { $(this).prop('selected', isChecked) $(this).closest('select').trigger('change'); }); }); });

 .checkbox-holder { border: solid lime 1px; }

 <form data-node-type="commerce-add-to-cart-form" data-commerce-sku-id="5dd53f32b98acb0ed12d8004" data-loading-text="Adding to cart..." data-commerce-product-id="5dd53f32b98acb49122d7ffd" class="w-commerce-commerceaddtocartform"> <div role="group" data-wf-sku-bindings="%5B%7B%22from%22%3A%22f_sku_values_3dr%22%2C%22to%22%3A%22optionValues%22%7D%5D" data-commerce-product-sku-values="%7B%2238a7c5187112b57e87fd3e059d184f42%22%3A%224b010dfc26908b131d0de6a7191bf44d%22%2C%2202ec6d9777a31120378034ef57c57359%22%3A%22dd8678fbf5647e7c2149c78f06f3fd12%22%2C%22397f1ba5006bd7c253c4d55ac6a92220%22%3A%22bb2e628cbccceeb10faa80941332650d%22%7D" data-node-type="commerce-add-to-cart-option-list" data-commerce-product-id="5dd53f32b98acb49122d7ffd" class="option-list"> <div role="group" class="option"><label data-wf-bindings="%5B%7B%22innerHTML%22%3A%7B%22type%22%3A%22PlainText%22%2C%22filter%22%3A%7B%22type%22%3A%22identity%22%2C%22params%22%3A%5B%5D%7D%2C%22dataPath%22%3A%22name%22%7D%7D%5D">size</label> <select id="option-set-38a7c5187112b57e87fd3e059d184f42" data-node-type="commerce-add-to-cart-option-select" data-commerce-option-set-id="38a7c5187112b57e87fd3e059d184f42" class="select w-select" required=""> <option selected="" value="">Select size</option> <option value="4b010dfc26908b131d0de6a7191bf44d">Medium</option> <option value="cdbe5bc68b99681edc0dc58a0c140891">Large</option> </select> </div> <div role="group" class="option"><label data-wf-bindings="%5B%7B%22innerHTML%22%3A%7B%22type%22%3A%22PlainText%22%2C%22filter%22%3A%7B%22type%22%3A%22identity%22%2C%22params%22%3A%5B%5D%7D%2C%22dataPath%22%3A%22name%22%7D%7D%5D">clips add on</label> <select id="option-set-02ec6d9777a31120378034ef57c57359" data-node-type="commerce-add-to-cart-option-select" data-commerce-option-set-id="02ec6d9777a31120378034ef57c57359" class="select w-select" required=""> <option selected="" value="">Select clips add on</option> <option value="06cddab0785e4c8debe8ca6bec42ad74">Cycling Clips</option> <option value="dd8678fbf5647e7c2149c78f06f3fd12">Nothing</option> </select> </div> <div role="group" class="option"><label data-wf-bindings="%5B%7B%22innerHTML%22%3A%7B%22type%22%3A%22PlainText%22%2C%22filter%22%3A%7B%22type%22%3A%22identity%22%2C%22params%22%3A%5B%5D%7D%2C%22dataPath%22%3A%22name%22%7D%7D%5D">lights add on</label> <select id="option-set-397f1ba5006bd7c253c4d55ac6a92220" data-node-type="commerce-add-to-cart-option-select" data-commerce-option-set-id="397f1ba5006bd7c253c4d55ac6a92220" class="select w-select" required=""> <option selected="" value="">Select lights add on</option> <option value="d846e2515b8c7395944a499dbf6015e3">Red Cycing Light</option> <option value="bb2e628cbccceeb10faa80941332650d">Nothing</option> </select> </div> </div> <div class="div-block"> <div class="checkbox-holder"> <div id="clips-checkbox" class="checkbox-field"> <div class="checkbox" style="border-color: rgb(170, 170, 170);"> <div class="checkbox-icon" style="display: none;"></div> </div> <div class="checkbox-label">Cycling Clips ( + 25 €)</div> </div> </div> <div class="checkbox-holder" data-check-value="d846e2515b8c7395944a499dbf6015e3" data-target="#option-set-397f1ba5006bd7c253c4d55ac6a92220"> <div id="light-checkbox" class="checkbox-field"> <div class="checkbox" style="border-color: rgb(170, 170, 170);"> <div class="checkbox-icon" style="display: none;"></div> </div> <div class="checkbox-label">Red Safety Light ( + 50 €)</div> </div> </div> </div> <div data-wf-sku-bindings="%5B%7B%22from%22%3A%22f_price_%22%2C%22to%22%3A%22innerHTML%22%7D%5D" class="product-detail-price">$180.00</div> <div class="product-detail-cta-wrap"><input type="submit" value="Add To Cart" class="w-commerce-commerceaddtocartbutton button"></div> </form> <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>