编写地址选择器代码

以下是一个简单的地址选择器代码，你可以根据需要进行修改和优化：

HTML:

<label for="country">Country:</label>
<select id="country">
  <option value="">--Please select--</option>
  <option value="USA">USA</option>
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
</select>

<label for="state">State:</label>
<select id="state" disabled>
  <option value="">--Please select a country first--</option>
</select>

<label for="city">City:</label>
<select id="city" disabled>
  <option value="">--Please select a state first--</option>
</select>

JavaScript:

// Address data
const countries = [
  {
    name: "USA",
    states: [
      {
        name: "California",
        cities: ["Los Angeles", "San Francisco", "San Diego"]
      },
      {
        name: "New York",
        cities: ["New York City", "Buffalo", "Rochester"]
      }
    ]
  },
  {
    name: "Canada",
    states: [
      {
        name: "Ontario",
        cities: ["Toronto", "Ottawa", "Hamilton"]
      },
      {
        name: "Quebec",
        cities: ["Montreal", "Quebec City", "Sherbrooke"]
      }
    ]
  },
  {
    name: "Mexico",
    states: [
      {
        name: "Jalisco",
        cities: ["Guadalajara", "Puerto Vallarta", "Tlaquepaque"]
      },
      {
        name: "Mexico City",
        cities: ["Mexico City", "Toluca", "Puebla"]
      }
    ]
  }
];

// Select elements
const countrySelect = document.getElementById("country");
const stateSelect = document.getElementById("state");
const citySelect = document.getElementById("city");

// Populate country select
countries.forEach((country) => {
  const option = document.createElement("option");
  option.textContent = country.name;
  option.value = country.name;
  countrySelect.appendChild(option);
});

// Country select change event
countrySelect.addEventListener("change", (event) => {
  // Clear state and city selects
  stateSelect.innerHTML = '<option value="">--Please select a country first--</option>';
  citySelect.innerHTML = '<option value="">--Please select a state first--</option>';
  stateSelect.disabled = true;
  citySelect.disabled = true;

  // Get selected country
  const selectedCountry = event.target.value;

  // Find selected country in data
  const country = countries.find((c) => c.name === selectedCountry);

  // If country has states, populate state select
  if (country.states && country.states.length > 0) {
    stateSelect.disabled = false;
    country.states.forEach((state) => {
      const option = document.createElement("option");
      option.textContent = state.name;
      option.value = state.name;
      stateSelect.appendChild(option);
    });
  }
});

// State select change event
stateSelect.addEventListener("change", (event) => {
  // Clear city select
  citySelect.innerHTML = '<option value="">--Please select a state first--</option>';
  citySelect.disabled = true;

  // Get selected state
  const selectedState = event.target.value;

  // Find selected country in data
  const country = countries.find((c) => c.name === countrySelect.value);

  // Find selected state in country data
  const state = country.states.find((s) => s.name === selectedState);

  // If state has cities, populate city select
  if (state.cities && state.cities.length > 0) {
    citySelect.disabled = false;
    state.cities.forEach((city) => {
      const option = document.createElement("option");
      option.textContent = city;
      option.value = city;
      citySelect.appendChild(option);
    });
  }
});

在上面的代码中，我们先在HTML中创建了三个下拉框，分别用于选择国家、州/省和城市。然后在JavaScript中定义了一个包含地址数据的数组，以及处理下拉框选择事件的代码。当用户选择一个国家时，州/省下拉框会被激活并填充可用的选项。当用户选择一个州/省时，城市下拉框会被激活并填充可用的选项。