如何在Woocommerce中为AJAX加载的城市下拉框默认选中Київ

Hey there! Let's get your WooCommerce city dropdown to automatically select "Київ" right after it loads via AJAX. I'll start by assuming your existing createListCity function looks similar to this (based on your description that it generates an empty default option plus city entries):

function createListCity(cities) {
    let selectHtml = '<option value="">Select city...</option>';
    cities.forEach(city => {
        selectHtml += `<option value="${city.id}">${city.name}</option>`;
    });
    return selectHtml;
}

Modified Function to Default-Select Київ #

The fix is straightforward: we just add a check for when the city name matches "Київ" and inject the selected attribute into that option. Here's the updated code:

function createListCity(cities) {
    let selectHtml = '<option value="">Select city...</option>';
    cities.forEach(city => {
        // Check if current city is Київ, add selected attribute if true
        const isSelected = city.name === 'Київ' ? 'selected' : '';
        selectHtml += `<option value="${city.id}" ${isSelected}>${city.name}</option>`;
    });
    return selectHtml;
}

Key Details & Edge Cases #

• Exact match check: This code looks for an exact string match with "Київ". If your city data uses different casing (like "київ" or "КИЇВ") or extra characters, switch to a case-insensitive check:

  const isSelected = city.name.toLowerCase() === 'київ'.toLowerCase() ? 'selected' : '';
  

• Use city ID instead (more reliable): If you know the unique ID assigned to Київ in your WooCommerce setup (e.g., 15), checking against the ID is more stable than the name (since names can change):

  const isSelected = city.id === 15 ? 'selected' : '';
  

• Verify AJAX integration: Double-check that your AJAX success callback is using this updated createListCity function. If you're using a cache plugin, clear it to ensure the changes take effect immediately.

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