Как получить раскрывающееся значение для обновления на основе другого раскрывающегося списка jquery

Question

У меня есть форма, в которой мы предоставляем варианты действий в раскрывающемся списке как для приглашенного, так и для гостя. По умолчанию приглашенный и гость могут выбирать свои собственные действия. Однако клиент запросил опцию выбора, чтобы гость мог выбрать те же действия, что и приглашенный. Я пытаюсь заполнить выпадающее значение для гостя, чтобы соответствовать, и я думаю, что я понял это. Однако я не могу понять, как получить гостевые значения для обновления, если приглашенный меняет один из своих вариантов.

В общей сложности 6 различных выпадающих списков активности, но для этой цели я включу только один для каждый:

(function($) {
  $('input[name="GActivityFridaycb"]').click(function() {
    if ($(this).is(":checked")) {
      $("#GActivityFriday1").val($("#ActivityFriday1").val());
    }
  });

  $('input[name="ActivityFriday1"]').on('change', function() {
    if ($('input.GActivityFridaycb').prop('checked')) {
      $("#GActivityFriday1").val($("#ActivityFriday1").val());
    }

  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- invitee -->
<select id="ActivityFriday1" name="ActivityFriday1">
  <option></option>
  <option value="first activity">first activity</option>
  <option value="second activity">second activity</option>
  <option value="third activity">third activity</option>
  <option value="fourth activity">fourth activity</option>
</select>


<!-- guest -->
<div>
  <input type="checkbox" name="GActivityFridaycb" id="GActivityFridaycb" value="Same as Invitee"> I would like to do same activities as Invitee
</div>
<div class="dropdown" style="padding-left: 16px;">
  <select id="GActivityFriday1" name="GActivityFriday1">
    <option></option>
    <option value="first activity">first activity</option>
    <option value="second activity">second activity</option>
    <option value="third activity">third activity</option>
    <option value="fourth activity">fourth activity</option>
  </select>
</div>

jquery. Первая функция - заполнить значение на основе выбора приглашенного. Вторая функция для обновления, если значение приглашенного изменяется - это часть, которая не работает для меня:

Answer 1

В вашем коде 2 ошибки.

1. $('input[name="ActivityFriday1"]') должно быть $('Select[name="ActivityFriday1"]') это выбор, а не ввод.

2. if ($('input.GActivityFridaycb'). должно быть if ($('input#GActivityFridaycb'). нет элемента с классом GActivityFridaycb, но есть id или name соответствие GActivityFridaycb

Демо

(function($) {
  $('input[name="GActivityFridaycb"]').click(function() {
    if ($(this).is(":checked")) {
      $("#GActivityFriday1").val($("#ActivityFriday1").val());
    }
  });

  $('select[name="ActivityFriday1"]').on('change', function() {
    if ($('input#GActivityFridaycb').prop('checked')) {
      $("#GActivityFriday1").val($("#ActivityFriday1").val());
    }

  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown" style="padding-left: 16px;">
  <select id="ActivityFriday1" name="ActivityFriday1">
    <option></option>
    <option value="first activity">first activity</option>
    <option value="second activity">second activity</option>
    <option value="third activity">third activity</option>
    <option value="fourth activity">fourth activity</option>
  </select>
</div>

<div>
  <input type="checkbox" name="GActivityFridaycb" id="GActivityFridaycb" value="Same as Invitee"> I would like to do same activities as Invitee
</div>
<div class="dropdown" style="padding-left: 16px;">
  <select id="GActivityFriday1" name="GActivityFriday1">
    <option></option>
    <option value="first activity">first activity</option>
    <option value="second activity">second activity</option>
    <option value="third activity">third activity</option>
    <option value="fourth activity">fourth activity</option>
  </select>
</div>

Answer 2

используйте select вместо input при выборе doropdown.

$('select[name="ActivityFriday1"]').on('change', function() {
    if ($('input.GActivityFridaycb').prop('checked')) {
      $("#GActivityFriday1").val($("#ActivityFriday1").val());
    }

https://jsfiddle.net/pramodsingh/gbk189ds/11/