我正在尝试使用复选框在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();
});
非常感谢您的帮助！
答案 0 :(得分：0)
如果选择了复选框而不是选择框选项，请使用以下代码。
例如： 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>
答案 1 :(得分：0)
在您选择的事件中，有类似的东西
function() {
$(this)...
}
也许问题是范围问题，请尝试使用类似以下内容的
：function(e) {
$(e)...
}
答案 2 :(得分：0)
我从您的页面上删除了这个，请原谅那些奇数的选择器，但这不在问题之内。因此，请获取“（”之前的文本，然后使用它来选择适当的选项并触发更改。请注意，在此示例中，由于拼写原因，在此示例中，仅“循环剪辑”是有效值。
如果我们在<div class="checkbox-holder" data-option-value="d846e2515b8c7395944a499dbf6015e3">之类的Checky事物上具有选项值，那么我们可以做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>