Permudahkan Pengurusan Dropdown Anda dengan populateDropdown

/**
 * Populates a dropdown dynamically with customizable attributes, text, and value.
 * @param {string} selector - The dropdown selector.
 * @param {Array} data - The array of objects containing data for the options.
 * @param {string} defaultOption - The default placeholder text for the dropdown.
 * @param {string} textKey - The key in the data object to use for option text.
 * @param {string} valueKey - The key in the data object to use for the value attribute.
 * @param {Array} [attributeKeys] - An array of keys from the data object to use as attributes for options.
 */
function populateDropdown(selector, data, defaultOption = "Select Option", textKey, valueKey, attributeKeys = []) {
  let options = `<option value=''>${defaultOption}</option>`;

  data.forEach((item) => {
    let attrString = attributeKeys
      .map((key) => (item[key] ? `${key}='${item[key]}'` : ""))
      .join(" ");

    options += `<option value='${item[valueKey]}' ${attrString}>${item[textKey]}</option>`;
  });

  $(selector).html(options).attr("disabled", false);
}

const fruitData = [ 
 { id: 1, name: 'Apple', color: 'red' }, 
 { id: 2, name: 'Banana', color: 'yellow' }, 
 { id: 3, name: 'Cherry', color: 'red' }, 
];

populateDropdown(
  '#fruitDropdown', 
  fruitData, 
  'Choose a Fruit', 
  'name', 
  'id', 
  ['color']
);

<pilih>



<h2>
  
  
  Mengapa Anda Memerlukan Fungsi Ini
</h2>

<p><strong>Kecekapan</strong>: Memperkemas penciptaan lungsur turun, mengurangkan lebihan kod.<br>
<strong>Kebolehpercayaan</strong>: Meminimumkan ralat dengan menjana pilihan secara automatik.<br>
<strong>Fleksibiliti</strong>: Mudah menyesuaikan diri dengan struktur dan keperluan data yang berbeza.<br>
<strong>Penyelenggaraan</strong>: Memudahkan kemas kini dan kalis masa hadapan kod anda.</p>

<p>Dengan menggunakan populateDropdown, anda bukan sahaja menulis kod yang lebih bersih—anda juga memastikan dropdown anda dinamik, boleh disesuaikan dan mudah diurus. Fungsi ini boleh menjadi senjata rahsia anda untuk mengendalikan menu lungsur turun dengan mudah dan yakin.</p>

<p>Saya harap ini memberi anda gambaran yang jelas tentang mengapa fungsi ini bermanfaat dan cara menggunakannya dengan berkesan.</p>