0

Есть два выпадающих списка выбора стран. "Откуда" и "куда". Как сделать так, чтобы при выборе в одном из выпадающем списке любой страны, во второй выпадающий список автоматически добавлялась страна с id = 220. И обратно. При замене значения во втором выпадающем списке(с id = 220) на другой, в первом выпадающем списке ставится страна с id = 220. Помогите пожалуйста.

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

2
  • Т.е. в одном из двух списков всегда должна быть выбрана страна с id=220, верно?
    – br3t
    15 мар 2017 в 9:10
  • Да. Верно. Если в первом списке выбираем например страну с id=100, то во втором списке проставляется страна с id=220. И также наоборот.
    – Viktor
    15 мар 2017 в 9:16

1 ответ 1

0

Синхронизируем селекты примерно так:

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

1
  • Спасибо большое. Все отлично работает!
    – Viktor
    15 мар 2017 в 9:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.