Using javascript and/or jQuery, trying to update multiple dropdowns from a master dropdown, but only the last dropdown is getting updated

Question

Here is a jsFiddle showing the issue I am having. I have a dynamic number of records coming in from a database. I'm inserting these records into a table, and the very first row of the table is a "bulk insert" row. If a user selects a value from the dropdown in the first row I want it to update all the other rows. For some reason it's only updating the last row. Can somebody look and tell me what I'm doing wrong? Please!?!?

<div class="table-responsive">
  <table
    id="insTblDates"
    class="table table-sm table-striped"
    style="font-size: small"
  >
    <thead>
      <tr>
        <th>From</th>
        <th>To</th>

        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>

        <td>
          <div class="dropdown d-grid d-md-block text-center">
            <button
              id="copy_btnLocationArea"
              type="button"
              class="btn btn-outline-dark btn-sm dropdown-toggle mx-1"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              style="overflow: visible"
              aria-expanded="false"
            >
              <span class="fa fa-globe"></span>&nbsp;Location
            </button>
            <ul
              id="copy_ddLocationAreas"
              class="dropdown-menu csr_lnk"
              style="max-height: 400px; width: auto; overflow: auto"
            >
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline copy_ddLocationArea"
                  id="copy_ddLocationArea1"
                  value="1"
                  name="copy_ddlocationArea"
                  onclick="copy_ddLocationAreaChanged(this.value);"
                /><label
                  for="copy_ddLocationArea1"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >In County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline copy_ddLocationArea"
                  id="copy_ddLocationArea2"
                  value="2"
                  name="copy_ddlocationArea"
                  onclick="copy_ddLocationAreaChanged(this.value);"
                /><label
                  for="copy_ddLocationArea2"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline copy_ddLocationArea"
                  id="copy_ddLocationArea3"
                  value="3"
                  name="copy_ddlocationArea"
                  onclick="copy_ddLocationAreaChanged(this.value);"
                /><label
                  for="copy_ddLocationArea3"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of Country</label
                >
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr id="f3112025|t3112025">
        <td>3/11/2025</td>
        <td>3/11/2025</td>
        <td>
          <div class="dropdown d-grid d-md-block text-center">
            <button
              type="button"
              class="btn btn-outline-dark btn-sm dropdown-toggle new_btnLocationArea mx-1"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              style="overflow: visible"
              aria-expanded="false"
            >
              <span class="fa fa-globe"></span>&nbsp;Location
            </button>
            <ul
              id="new_ddLocationAreas3112025"
              class="dropdown-menu csr_lnk new_ddLocationAreas"
              style="max-height: 400px; width: auto; overflow: auto"
            >
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea1_3112025"
                  value="1"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea1_3112025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >In County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea2_3112025"
                  value="2"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea2_3112025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea3_3112025"
                  value="3"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea3_3112025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of Country</label
                >
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr id="f3182025|t3182025">
        <td>3/18/2025</td>
        <td>3/18/2025</td>
        <td>
          <div class="dropdown d-grid d-md-block text-center">
            <button
              type="button"
              class="btn btn-outline-dark btn-sm dropdown-toggle new_btnLocationArea mx-1"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              style="overflow: visible"
              aria-expanded="false"
            >
              <span class="fa fa-globe"></span>&nbsp;Location
            </button>
            <ul
              id="new_ddLocationAreas3182025"
              class="dropdown-menu csr_lnk new_ddLocationAreas"
              style="max-height: 400px; width: auto; overflow: auto"
            >
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea1_3182025"
                  value="1"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea1_3182025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >In County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea2_3182025"
                  value="2"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea2_3182025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea3_3182025"
                  value="3"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea3_3182025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of Country</label
                >
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr id="f3252025|t3252025">
        <td>3/25/2025</td>
        <td>3/25/2025</td>
        <td>
          <div class="dropdown d-grid d-md-block text-center">
            <button
              type="button"
              class="btn btn-outline-dark btn-sm dropdown-toggle new_btnLocationArea mx-1"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              style="overflow: visible"
            >
              <span class="fa fa-globe"></span>&nbsp;Location
            </button>
            <ul
              id="new_ddLocationAreas3252025"
              class="dropdown-menu csr_lnk new_ddLocationAreas"
              style="max-height: 400px; width: auto; overflow: auto"
            >
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea1_3252025"
                  value="1"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea1_3252025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >In County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea2_3252025"
                  value="2"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea2_3252025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of County</label
                >
              </li>
              <li>
                &nbsp;<input
                  type="radio"
                  class="d-inline new_ddLocationArea"
                  id="new_ddLocationArea3_3252025"
                  value="3"
                  name="new_ddlocationArea"
                  onclick="new_ddLocationAreaChanged(this.value);"
                /><label
                  for="new_ddLocationArea3_3252025"
                  class="d-inline input small dropdownLabel_NormalFont"
                  >Out of Country</label
                >
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

function copy_ddLocationAreaChanged(val) {
    $(".new_ddLocationArea").each(function () {
        if ($(this).val() == val) {
            $(this).prop("checked", true)
        }
    })
}

"dropdown" usually refers to <select> menus, not radio buttons. — Barmar
– Barmar, Commented Feb 25 at 20:34
Thanks @Barmar, so going forward the proper reference would be to refer to them as "radio buttons"? — JimmyG
– JimmyG, Commented Feb 25 at 21:40
Yes, that's what they are. What you're calling a dropdown would be a radio button group. — Barmar
– Barmar, Commented Feb 25 at 21:41

David · Accepted Answer · 2025-02-25 20:11:28Z

4

All of the subsequent radio buttons have the same name, so they're effectively all one group of radio buttons. And only one radio button in a group can be selected, this is by design.

If you give a different name to each group, that seems to correct the problem. I can't speak to what other changes you'd need to make to your overall system as a result of course. But if the plan is to use radio buttons then any such radio buttons which need to be simultaneously selectable will need to be grouped separately.

answered Feb 25 at 20:11

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using javascript and/or jQuery, trying to update multiple dropdowns from a master dropdown, but only the last dropdown is getting updated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related