我有2个下拉菜单,在页面加载时应该具有相同的值。它们用于根据选择的车辆在WooCommerce网站上过滤产品。首先,用户选择车辆的品牌,型号和系列。然后,当搜索显示结果时,我需要将“系列选定”选项复制到第二个下拉列表,该下拉列表由“搜索与过滤器”插件创建(在文档加载时),以便过滤器显示的结果与“系列”相关。
$(document).on('ready', 'select[name="year_id"]', function() {
$('select[name="_sft_product_make[]"]').text($(this).text());
})
<select name="year_id">
<option value="">Series</option>
<option value="379">WH/WK (2005 - 2010)</option>
<option value="378">WJ (1999 - 2004)</option>
<option value="380">WK2 (2011 - 2013)</option>
<option value="1463">WK2 (2014 - 2016)</option>
<option value="381">ZJ (1993 - 1998)</option>
</select>
<select name="_sft_product_make[]" class="sf-input-select" title="">
<option class="sf-level-0 sf-item-379" data-sf-count="2" data-sf-depth="0" value="whwk-2005-2010">WH/WK (2005 – 2010)</option>
<option class="sf-level-0 sf-item-378" data-sf-count="5" data-sf-depth="0" value="wgwj-1999-2005">WJ (1999 – 2004)</option>
<option class="sf-level-0 sf-item-380" data-sf-count="5" data-sf-depth="0" value="wk2-2010-2015">WK2 (2011 – 2013)</option>
<option class="sf-level-0 sf-item-1463" data-sf-count="6" data-sf-depth="0" value="wk2-2014-2016">WK2 (2014 – 2016)</option>
<option class="sf-level-0 sf-item-381" data-sf-count="3" data-sf-depth="0" value="zj-1993-1998">ZJ (1993 – 1998)</option>
</select>
_sft_product_make[]
列出了所有车辆的制造商/型号/系列,因此我需要的是从中选择的选项,year_id
以便_sft_product_make[]
在文档加载时自动选择正确的选项。
我的问题是两个下拉列表中的“值”采用不同的格式。我以前从未写过JS,所以请多多包涵... :)
谢谢
可以了
$(document).on("ready", function(){
$('select[name="year_id"]').on('change', function() { //this triggers every time the select changes
id = $( "select[name='year_id'] option:selected").val(); //this gets the value of the selected option
$("select[name='_sft_product_make[]']").find('.sf-item-' + id).prop('selected',true); //this sets the option with the class that ends with the id as seleted.
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="year_id">
<option value="">Series</option>
<option value="379">WH/WK (2005 - 2010)</option>
<option value="378">WJ (1999 - 2004)</option>
<option value="380">WK2 (2011 - 2013)</option>
<option value="1463">WK2 (2014 - 2016)</option>
<option value="381">ZJ (1993 - 1998)</option>
</select>
<select name="_sft_product_make[]" class="sf-input-select" title="">
<option class="sf-level-0 sf-item-379" data-sf-count="2" data-sf-depth="0" value="whwk-2005-2010">WH/WK (2005 – 2010)</option>
<option class="sf-level-0 sf-item-378" data-sf-count="5" data-sf-depth="0" value="wgwj-1999-2005">WJ (1999 – 2004)</option>
<option class="sf-level-0 sf-item-380" data-sf-count="5" data-sf-depth="0" value="wk2-2010-2015">WK2 (2011 – 2013)</option>
<option class="sf-level-0 sf-item-1463" data-sf-count="6" data-sf-depth="0" value="wk2-2014-2016">WK2 (2014 – 2016)</option>
<option class="sf-level-0 sf-item-381" data-sf-count="3" data-sf-depth="0" value="zj-1993-1998">ZJ (1993 – 1998)</option>
</select>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句