Jquery 在 select 中的所有选项上模拟单击事件以从多个选择选项中获取数据

Question

我正在尝试从这些下拉列表中获取所有城市（Tỉnh/Thành）、区（Quận/Huyện）、病房（Phường/Xã）和街道（Đường/Phố）信息（在选项属性中包括它的名称和值）在本站选https://alonhadat.com.vn/dang-tin-nha-dat.html

地区选择框数据仅基于城市显示，病房和街道选择框数据仅基于地区显示，因此为了获得我需要模拟的所有数据，单击选择选项以获取下一个数据

我已经编写了这两个函数来在控制台中运行以抓取数据：

function getCities(){
    var data = {}
    var cities = $('#tinh').children();
    for (let i = 1; i < cities.length; i++){
        const city = cities[i];

        data[city.getAttribute('value')] = {
            name: city.text,
            districts: {}
        };
    }

   return data;
}

function getDistricts(cities) {
    for (let i = 0; i < Object.keys(cities).length; i++) {
      var cityKey = Object.keys(cities)[i];

      //simulate click on city(Tỉnh/ Thành)
      $('#tinh').val(cityKey).change();

      var districts = $('#huyen').children();
      for (let j = 1; j < districts.length; j++) {
        const district = districts[j];
        cities[cityKey].districts[district.getAttribute('value')] = {
          name: district.text,
          wards:{},
          streets: {}
        };

        //simulate click on district(Quận/ Huyện)
        $('#huyen').val(district.getAttribute('value')).change();

        // get data of district( Đường/Phố - steert and Phường/Xã - wards)
        var streets = $('#street_acp_text > ul').children();
        var wards = $('#phuong').children();
        for (let k = 1; k < streets.length; k++) {
            const street = streets[k];
            cities[cityKey].districts[district.getAttribute('value')].streets[street.getAttribute('value')] = street.textContent;
          }
        for (let j = 1; j < wards.length; j++) {
          const ward = wards[j];
          cities[cityKey].districts[district.getAttribute('value')].wards[ward.getAttribute('value')] = ward.text;
        }
      }
    }
    console.log(cities);
  }
getDistricts(getCities())

getCities() 获取 Tỉnh/Thành 的选择框中的所有城市名称和值，getDistricts() 基本上使用 getCities() 数据点击城市选择框，以便数据可以在地区选择框中获取，然后点击通过地区选择框中的每个选项来获取病房和街道数据

目前我只能在我的城市对象中获取城市数据，我似乎无法模拟选择框上的点击动作来处理

我是一个 jquery 新手，所以任何帮助将不胜感激:)

更新：

我检查了元素中的数据，看起来 $('#tinh').val(cityKey).change() 只更改了选定的值，但实际上并未模拟单击选择框中的值，因此数据不会在区域框中生成。 我将如何模拟点击动作？

Answer 1

您可能应该使用.trigger('click')来正确地发出点击事件。

.trigger('change')正在发出更改事件，大部分时间表明选择器值已被某些操作更改。 它可以是除了点击之外的任何东西，所以你不能依靠它来模拟点击

更新：

刚刚在网站上试了一下， $('#tinh').val('1').change()似乎工作正常，不同选择器的孩子显示正确。 如果你在循环中的某个地方放置断点，你可以看到区域数据首先被正确加载，然后在一些迭代后它全部下降。 这可能是一些加载问题，您可以尝试在触发选择器更改后使用setTimeout等待

Answer 2

更改select值后执行$('#tinh').trigger('change') 。