There are two dropdown lists for selecting countries. "From" and "to". How to make it so that when you select any country in a drop-down list, a country with id = 220 is automatically added to the second drop-down list. And back. When replacing the value in the second drop-down list (with id = 220) with another one, the first drop-down list contains the country with id = 220. Please help.

<div class="home-main-block-data_right"> <div class="form-group"> <p>Откуда</p> <table class="tb_m"> <tr> <td>Страна</td> <td class="form-group_item"> <select onchange="calc();" id="country-from" name="country-from"> <?php foreach(Calc_zones::getCountriesListForSelectByLang(LANG) as $country){ ?> <option <?php if($country['id'] == 220){ ?>selected<?php } ?> value="<?=$country['id']?>"><?=$country['title']?></option> <?php } ?> </select></td> </tr> </table> <p>Куда</p> <table class="tb_m"> <tr> <td><label for="country-from" style="font-weight: 100"><?=__('lng.calc.country', 'Страна')?></label></td> <td class="form-group_item"> <select onchange="calc();" id="country-in" name="country-in"> <?php foreach(Calc_zones::getCountriesListForSelectByLang(LANG) as $country){ ?> <option <?php if($country['id'] == 223){ ?>selected<?php } ?> value="<?=$country['id']?>"><?=$country['title']?></option> <?php } ?> </select></td> </tr> </table> </div> </div>

  • Those. in one of the two lists, the country should always be selected with id = 220, right? - br3t
  • Yes. Right. If in the first list we select for example a country with id = 100, then in the second list the country with id = 220 is put down. And also vice versa. - Viktor

1 answer 1

We synchronize selects like this:

 $('body').on('change','#country-from,#country-in', function() { var mainCountryId = 220; var thisSelect = $(this); var thatSelect = this.id == 'country-from' ? $('#country-in') : $('#country-from'); if(thisSelect.val() == mainCountryId && thatSelect.val() == mainCountryId) { // оба mainCountryId thatSelect.val(thatSelect.find('option[value!='+mainCountryId+']').eq(0).val()); } else if(thisSelect.val() != mainCountryId && thatSelect.val() != mainCountryId) { // ни один mainCountryId thatSelect.val(mainCountryId); } calc(); }); function calc(){} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="home-main-block-data_right"> <div class="form-group"> <p>Откуда</p> <table class="tb_m"> <tr> <td>Страна</td> <td class="form-group_item"> <select id="country-from" name="country-from"> <option value="110">Страна 110</option> <option selected value="220">Страна 220</option> <option value="380">Страна 380</option> <option value="550">Страна 550</option> </select></td> </tr> </table> <p>Куда</p> <table class="tb_m"> <tr> <td><label for="country-from" style="font-weight: 100">Страна</label></td> <td class="form-group_item"> <select id="country-in" name="country-in"> <option selected value="110">Страна 110</option> <option value="220">Страна 220</option> <option value="380">Страна 380</option> <option value="550">Страна 550</option> </select></td> </tr> </table> </div> </div>

  • Thank you very much. Everything works great! - Viktor