I am unable to get dynamic data from the dropdown selected from options.The selcted option should be sent it to api

Question

I have this script which has some logic and html dropdown is selected from that,i need to send data to a API through ajax so i need to store data from the dropdown selected.

$('#state1').html('');
$('#city1').html('');
}
});
$(document).on('change', '#state1', function() {
  var state_id = $(this).val();
  if (state_id != '') {
    load_json_data('city1', state_id);
  } else {
    $('#city1').html('');
  }
});

//console.log($get = $("#country1 option[value='"+$value.name+"']").text());
//var selectValue = document.getElementById('list').value; var selectOption = $("#list option[value=" + selectValue + "]").text();
//console.log($("#country1 option:selected").text());
//console.log($(this).find("option:selected").text());
$.ajax({
  crossDomain: true,
  url: 'xyz',
  cache: false,
  type: 'POST',
  data: clientDetail,
  success: function(data) {
    self.SuccessMessage1(JSON.stringify(data))
  }
}).fail(
  function(xhr, textStatus, err) {
    (alert("Error happened " + Object.keys(err).join(' ')))
  });




COUNTRY:



  STATE:
  


  CITY:

i just need to send country,state and city to the api.

user_5375297 · Answer

The code below should help, data is what you want to send to the API

var country = $(document).find('#country').val()
var state = $(document).find('#state').val()
var city = $(document).find('#city').val()

var cityData = {city};
//var cityData = {city : city}; //this is also possible if the above do not work
var stateData = {state};
var countryData = {country};
var allData = {city, state, country}

console.log(cityData) //You can check all vars defined above by logging them



COUNTRY:



  STATE:
  


  CITY:

user_9394937 · Answer

function load_json_data1(id, parent_id)
                {
                var html_code = '';
                $.getJSON('country_state_city.json', function(data){

html_code += 'Select '+id+'';
                $.each(data, function(key, value){
                    if(id == 'country1')
                    {
                    if(value.parent_id == '0')
                    {
                    html_code += ''+value.name+'';
                    }
                    }
                    else
                    {
                    if(value.parent_id == parent_id)
                    {
                    html_code += ''+value.name+'';
                    }
                    }
                });
                $('#'+id).html(html_code);
                });

}

$(document).on('change', '#country1', function(){
                            var country_id = $(this).val();
                            if(country_id != '')
                            {
                            load_json_data('state1', country_id);
                            }
                            else
                            {
                            $('#state1').html('Select state');
                            $('#city1').html('Select city');
                            }
                            });
                            $(document).on('change', '#state1', function(){
                            var state_id = $(this).val();
                            if(state_id != '')
                            {
                            load_json_data('city1', state_id);
                            }
                            else
                            {
                            $('#city1').html('Select city');
                            }
                });

I am unable to get dynamic data from the dropdown selected from options.The selcted option should be sent it to api

2 Answers