时间戳

首页 > 解决方案 > 如何根据另一个下拉 jquery 获取要更新的下拉值

jquery - 如何根据另一个下拉 jquery 获取要更新的下拉值

问题描述

我有一个表格，我们在下拉列表中为受邀者和客人提供活动选项。默认情况下，受邀者和来宾都可以选择自己的活动。但是，客户已要求客人选择与受邀者相同的活动。我正在尝试填充要匹配的客人的下拉值，我相信我已经弄清楚了。但是，如果受邀者更改其中一个选项，我不知道如何更新来宾值。

总共有 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 到目前为止。第一个功能是根据受邀者选择填充值。如果受邀者值发生变化，则要更新的第二个功能 - 这是对我不起作用的部分：

标签： jqueryhtmlforms

解决方案

您的代码中有 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>

推荐阅读