函数传入API键值遇语法错误，getSelectedItemData未定义问题排查

Let's walk through the two key issues causing your error and fix your reusable function properly:

1. jQuery Selector Mismatch (The Root of the Undefined Error) #

The error "Cannot read property 'getSelectedItemData' of undefined" tells us that $(source_id) is returning an empty/undefined jQuery object. This almost always happens because:

• You're passing an unquoted ID variable (like title_id) instead of a valid jQuery selector string (like "#title_id"). Unless title_id is a pre-defined variable holding the selector string (e.g., const title_id = "#title_id"), jQuery can't locate your element.
• Double-check that the IDs you're passing match exactly with the IDs in your HTML—typos here are incredibly common!

2. Incorrect Object Property Access Syntax #

Your line getSelectedItemData().array_key uses dot notation for a variable property name, which doesn't work in JavaScript. Dot notation only works for fixed, hardcoded property names. When accessing a property using a variable (like array_key), you need to use bracket notation instead.

Corrected Code #

Here's the fixed function with added error checking to make debugging simpler:

function changevalue(source_id, target_id, array_key) {
  // First, confirm we can find the source element
  const $sourceElement = $(source_id);
  if (!$sourceElement.length) {
    console.error(`Could not find element with selector: ${source_id}`);
    return;
  }

  // Get the selected item data
  const selectedItemData = $sourceElement.getSelectedItemData();
  // Validate the data and requested key exist
  if (!selectedItemData || !(array_key in selectedItemData)) {
    console.error(`Missing data for key: ${array_key} in selected item`);
    return;
  }

  // Extract the value and update the target
  const selectedValue = selectedItemData[array_key];
  $(target_id).val(selectedValue).trigger("change");
}

// Call the function with valid jQuery selectors (note the # prefix!)
changevalue("#title_id", "#firstname_id", "email");

Key Fixes Explained #

• Bracket notation: selectedItemData[array_key] correctly accesses the property using your variable key, instead of looking for a literal property named "array_key".
• Selector validation: We check if the source element exists before calling methods on it, which prevents the "undefined" error and gives you a clear debug message.
• Data validation: We ensure the selected data and requested key exist, so you don't get unexpected undefined values in your target input.

内容的提问来源于stack exchange，提问作者user3066595