Раскрывающиеся меню JavaScript / jQuery 2 с той же опцией выбора при загрузке страницы

Question

У меня есть 2 выпадающих меню, которые должны соответствовать значению при загрузке страницы. Они используются для фильтрации продуктов на веб-сайте WooCommerce в зависимости от выбранного транспортного средства. Сначала пользователь выбирает марку, модель и серию автомобиля. Затем, когда при поиске отображаются результаты, мне нужно скопировать опцию «Выбранная серия» во 2-й выпадающий список, который создается плагином «Поиск и фильтр» (при загрузке документа), чтобы результаты, отображаемые фильтром, относились к серии.

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

Это работает.

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

Answer 2

Ваш код, вероятно, должен запускаться как изначально, так и при изменении выбранной опции, возможно, отслеживая событие изменения этой опции. _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 3

Вы можете использовать что-то подобное, используя jQuery. Во-первых, мы находим значение опции, которая имеет тот же текст, во втором элементе select и используем это значение для выбора соответствующей опции. Код не проверен, но он должен работать -

$(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}, например. SF-элемент-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>