JavaScript/jQuery 2 dropdown menus with the same select option on page load

Question

I have 2 drop down menus which should the same value on page load. They are used for filtering products on a WooCommerce website based on which vehicle is selected. First, a user selects the vehicle Make, Model and Series. Then, when the search displays the results, I need the Series selected option to be copied to a 2nd dropdown, which is created by Search & Filter plugin (on document load) so that the results displayed by the filter are relevant to the Series.

 $(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[] lists ALL the vehicle makes/models/series so all I need is for the selected option from year_id to automatically select the correct option in _sft_product_make[] on document load.

My problem is that the "value" in both dropdowns is in a different format. I've never written JS before so bear with me please... :)
Thank you

Answer 1

You might use something like this using jQuery. First, we find the value of the option that has the same text in the second select and use that value to select the corresponding option. The code is not tested but it should work -

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

Though, there might be better approaches if you maintain the structure like you have provided. Here options in the second select have a class name based on the primary select value like sf-item-{primary option value} eg sf-item-379. If this is the case you can directly access this option and make it selected via 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 2

This is working.

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

Your code should probably fire both initially and when you change the selected option perhaps, monitoring that option change event. _sft_product_make[] is a pretty horrid name so I will not use that.

Special note: the text seemed to be "off" somehow, I set a selected element fir "WK2 (2011 – 2013)", then had to actually copy the text from one to the other to make it match. Not sure what gives there.

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