JJack Jacek Zawistowski JJack Jacek Zawistowski - 2 months ago 6
jQuery Question

Set other <select> value depending on first <select>

I have two SELECT elements.
Both have the same titles of options, but different values.
Is there an option to set second SELECT.

First one:

<select id="acf-field_5640df62a984a-0-field_5640dfaea984b" class="" name="acf[field_5640df62a984a][0][field_5640dfaea984b]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0">
<option value="Albania">Albania</option>
<option value="Andora">Andora</option>
<option value="Austria">Austria</option>
<option value="Belgia">Belgia</option>
<option value="Białoruś">Białoruś</option>
<option value="Bośnia i Hercegowina">Bośnia i Hercegowina</option>
<option value="Bułgaria">Bułgaria</option>
<option value="Chorwacja">Chorwacja</option>
<option value="Czarnogóra">Czarnogóra</option>
<option value="Czechy">Czechy</option>
<option value="Dania">Dania</option>
<option value="Estonia">Estonia</option>
<option value="Finlandia">Finlandia</option>
<option value="Francja">Francja</option>
<option value="Grecja">Grecja</option>
<option value="Hiszpania">Hiszpania</option>
<option value="Holandia">Holandia</option>
<option value="Irlandia">Irlandia</option>
<option value="Islandia">Islandia</option>
<option value="Kazachstan">Kazachstan</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Litwa">Litwa</option>
<option value="Luksemburg">Luksemburg</option>
<option value="Łotwa">Łotwa</option>
<option value="Macedonia">Macedonia</option>
<option value="Malta">Malta</option>
<option value="Mołdawia">Mołdawia</option>
<option value="Monako">Monako</option>
<option value="Niemcy">Niemcy</option>
<option value="Norwegia">Norwegia</option>
<option value="Polska" selected="selected" data-i="0">Polska</option>
<option value="Portugalia">Portugalia</option>
<option value="Rosja">Rosja</option>
<option value="Rumunia">Rumunia</option>
<option value="San Marino">San Marino</option>
<option value="Serbia">Serbia</option>
<option value="Słowacja">Słowacja</option>
<option value="Słowenia">Słowenia</option>
<option value="Szwajcaria">Szwajcaria</option>
<option value="Szwecja">Szwecja</option>
<option value="Turcja">Turcja</option>
<option value="Ukraina">Ukraina</option>
<option value="Watykan">Watykan</option>
<option value="Węgry">Węgry</option>
<option value="Wielka Brytania">Wielka Brytania</option>
<option value="Włochy">Włochy</option>
</select>




Second SELECT:

<select id="acf-field_5640df62a984a-0-field_566178fe9bb1c" class="" name="acf[field_5640df62a984a][0][field_566178fe9bb1c]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0">
<option value="Albania">Albania</option>
<option value="Andorra">Andora</option>
<option value="Austria">Austria</option>
<option value="Belarus">Białoruś</option>
<option value="Belgium">Belgia</option>
<option value="Bosnia and Herzegovina">Bośnia i Hercegowina</option>
<option value="Bulgaria">Bułgaria</option>
<option value="Croatia">Chorwacja</option>
<option value="Czech Republic">Czechy</option>
<option value="Denmark">Dania</option>
<option value="Estonia">Estonia</option>
<option value="Finland">Finlandia</option>
<option value="France">Francja</option>
<option value="Germany">Niemcy</option>
<option value="Greece">Grecja</option>
<option value="Hungary">Węgry</option>
<option value="Iceland">Islandia</option>
<option value="Ireland">Irlandia</option>
<option value="Italy">Włochy</option>
<option value="Kazakhstan">Kazachstan</option>
<option value="Latvia">Łotwa</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Litwa</option>
<option value="Luxembourg">Luksemburg</option>
<option value="Malta">Malta</option>
<option value="Moldova">Mołdawia</option>
<option value="Monaco">Monaco</option>
<option value="Netherlands">Holandia</option>
<option value="Norway">Norwegia</option>
<option value="Poland" selected="selected" data-i="0">Polska</option>
<option value="Portugal">Portugalia</option>
<option value="Republic of Macedonia">Republic of Macedonia</option>
<option value="Romania">Rumunia</option>
<option value="Russia">Rosja</option>
<option value="San Marino">San Marino</option>
<option value="Serbia">Serbia</option>
<option value="Slovakia">Słowacja</option>
<option value="Slovenia">Słowenia</option>
<option value="Spain">Hiszpania</option>
<option value="Sweden: Szwecja">Sweden: Szwecja</option>
<option value="Switzerland">Szwajcaria</option>
<option value="Turkey">Turcja</option>
<option value="Ukraine">Ukraina</option>
<option value="United Kingdom">Wielka Brytania</option>
<option value="Vatican City">Watykan</option>
</select>



Answer

You can use jQuery's filter() function to filter out <option> elements in the second <select>. The following will work for your needs:

$('#acf-field_5640df62a984a-0-field_5640dfaea984b').on('change', function() {

    // Get the selected element:
    var $selected = $(this).find('option:selected');

    // Now find the matching one in the second <select>:
    $('#acf-field_5640df62a984a-0-field_566178fe9bb1c').find('option:selected').removeAttr('selected');
    $('#acf-field_5640df62a984a-0-field_566178fe9bb1c').find('option').filter(function() { return $(this).text() == $selected.text() }).attr('selected', true);

});

jsFiddle Demo