Jquery simulate click event on all options in select to get data from multiple select options

Question

I'm trying to get all cities(Tỉnh/ Thành), districts(Quận/ Huyện), wards(Phường/Xã) and streets(Đường/Phố ) informations(include name and value aka of it in option attribute) from these dropdown selects in this site https://alonhadat.com.vn/dang-tin-nha-dat.html

The district select box data only show based on the cities, the wards and streets select box data only show on based on the districts so in order to get all the data i need to simulate click on select options to get the next data

i had wrote those these 2 function to run in the console in order to crawl data:

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() get all the cities name and value in select box of Tỉnh/ Thành, getDistricts() basically use getCities() data to click through the city select box so the data can be get in district select box, after that it will click through every option in district select box to get wards and streets data

Currently i can only get the city data in my cities object, i can't seem to simulate click action on select box to process

I'm kind of a jquery newbie so any helps would be appreciate :)

UPDATE:

i checked the data in the element, it seem like $('#tinh').val(cityKey).change() only change the selected value but not actually simulate the click on the value in select box so the data doesn't get generate in the districs box. how would i simulate clicking action ?

Answer 1

You should probably use .trigger('click') to properly emit click event.

.trigger('change') is emitting change event, that most of the time shows that selector value has been changed by some action. It can be anything but click, so you can't rely on it to simulate click

UPD:

Just tried it on website, $('#tinh').val('1').change() seems to work correctly and childrens of different selector shows right. And if you'll place breakpoint somewhere in cycle, you can see district data is loaded properly at first, and then it all drops after some iterations. It could possibly be some loading issues, you can try to wait with setTimeout after you trigger change on selector

Answer 2

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