页面加载时具有相同选择选项的JavaScript / jQuery 2下拉菜单

伍德

我有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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法在Select2下拉菜单中选择项目

禁用jquery选择下拉菜单

如何使用Jquery控制下拉菜单选择选项菜单

jQuery“选择”下拉菜单出现时

在MVC中加载2下拉菜单的更好方法

Angular2下拉菜单恢复为先前选择的选项

带有相同选项的jQuery / Javascript多选下拉菜单

单击选择元素时,Bootstrap4下拉菜单会自动折叠

bootstrap 4下拉菜单导航栏用户首选项“ Welcome,User”

在Angular 7中导入Bootstrap时,Bootstrap 4下拉菜单中断

使用jQuery进行选择下拉菜单

在选择另一个select2下拉菜单时重置一个select2下拉菜单的元素

jQuery如果选择了下拉菜单

选择2下拉菜单,不提供所选项目的ID,我如何访问控制器绑定

如何使Bootstrap 3下拉菜单对没有JS用户起作用

在没有Jquery的情况下将列表项转换为下拉菜单

jQuery show-hide DIV与CONTACT FORM 7下拉菜单(选择字段)

jQuery下拉菜单已选择

带有Android的jQuery下拉菜单

当页面加载到jQuery中时,从下拉菜单中设置一个选项

jQuery 2下拉列表,从下拉列表2中删除所选项目1

Angular 3下拉菜单选择出生日期

jQuery:单击div->下拉菜单的选择选项

html5下拉菜单在悬停时无法正确加载

单击jQuery或JavaScript菜单下拉菜单

如何使用从Select2下拉列表中选择的选项来触发jQuery?

下拉菜单根据选择调用jQuery

按下选项卡时如何在焦点上打开select2下拉菜单

使用 jquery/javascript 在下拉菜单中动态选择选项仅有时有效