CODEWITHSUNDEEP
jqueryhtmlforms
dstiefeljr
dstiefeljr

Reputation: 5

How to get dropdown value to update based on another dropdown jquery

I have a form where we are giving activity options in a dropdown to both an invitee and a guest. The default is for both invitee and guest to be able to choose their own activities. However, client has requested a select option for guest to choose same activities as invitee. I'm trying to populate the dropdown value for the guest to match and I believe I have that figured out. However, I can't figure out how to get guest values to update if the invitee changes one of their options.

There are a total of 6 different activity dropdowns but for this purpose I'll only include one for each:

(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 thus far. First function is to populate value based on invitee selection. Second function to update if invitee value changes - this is part that isn't working for me:

Upvotes: 0

Views: 45

Answers (2)

Pramod Singh
Pramod Singh

Reputation: 42

use select instead of input while selecting a doropdown.

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

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

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

There is 2 errors in your code.

  1. $('input[name="ActivityFriday1"]') should be $('Select[name="ActivityFriday1"]') this is a select not an input.

  2. if ($('input.GActivityFridaycb'). should be if ($('input#GActivityFridaycb'). there is no element with the class GActivityFridaycb but there is an id or name matching GActivityFridaycb

Demo

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

Upvotes: 2

Related Questions