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

Question

我有 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，所以请多多包涵... :)
谢谢

Answer 1

您的代码可能应该在最初以及当您更改所选选项时触发，并监控该选项更改事件。 _sft_product_make[] 是一个非常可怕的名字，所以我不会使用它。

特别说明：文本似乎以某种方式“关闭”，我将选定元素设置为“WK2 (2011 – 2013)”，然后必须实际将文本从一个复制到另一个以使其匹配。不知道那里有什么。

$(function() {

  $('select[name="year_id"]').on('change', function() {
    // assume single select here vs multiple
    var yrTxt = $('select[name="year_id"]')
      .find('option')
      .filter(':selected').first().text();
    var sf = $('select.sf-input-select').find('option');
    sf.prop('selected', false);// unset, only set matches
    sf.each(function(index, element) {
      var elt = $(element).text();
      if (yrTxt == elt) {
        $(this).prop('selected', true);
      }
    });

  }).trigger('change');
});

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

Answer 2

您可以使用 jQuery 来使用类似的东西。首先，我们在第二次选择中找到具有相同文本的选项的值，并使用该值来选择相应的选项。代码未经测试，但应该可以工作 -

$(document).on("ready", function(){
  $('select[name="year_id"]').on('change', function() {
    var series = $( "select[name='year_id'] option:selected").text();
    var targetVal = $('select.sf-input-select option').filter(function () { return $(this).html() === series; }).val();
   $('select.sf-input-select').val(targetVal);
  });
});

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

不过，如果您按照您提供的那样维护结构，可能会有更好的方法。这里第二个选择中的选项具有基于主选择值的类名，例如 sf-item-{primary option value}科幻项目 379。如果是这种情况，您可以直接访问此选项并通过 JS/jQuery 将其选中。

$(document).on("ready", function(){
  $('select[name="year_id"]').on('change', function() {
    var series = $( this ).val();
    if(series) {
     var optionClass = ".sf-item-" + series;
     $('select.sf-input-select').find( optionClass ).prop('selected', true);
    }
  });
});

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

Answer 3

这是有效的。

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