There is such a select structure with countries loading country data from the server

<select> <option>Россия</option> <option>Армения</option> ... <select>

there is still a select where you need to load the cities and when receiving data in Russia you need to get a value in and call a function to load cities from this country to Moscow

When changing the field with countries, when they are loaded, the data is received, but when they are loaded for the first time, there is no way to do it, who can tell?

I tried to wait for the full load. DOM still fails to take the first value, it may not have time to load the data field, I just can not find a solution.

script in jsp to javascript

 <script> $(document.getElementById("selectUserCountry")).ready( getCity() );

--------------- The code above did not help to get the data (( -------------

  function getCity() { var countryInput = $('select#selectUserCountry option:checked').val(); console.log("Country value" + countryInput); var selectId = document.getElementById("selectUserCountry").options.selectedIndex; var txt= document.getElementById("selectUserCountry").options[selectId].text; var val= document.getElementById("selectUserCountry").options[selectId].value; console.log("SelectID text" + txt); console.log("SelectID value" + val); $.ajax({ url: "./JsonGetCity", scriptCharset: 'UTF-8', method: 'POST', dataType: 'json', mimeType: 'application/json', contentType: 'application/json', data: {"country":countryInput}, error: function(message) { console.log(message); }, success: function (res) { console.log("Data from index in JSON -- " + countryInput); var input = document.getElementById("selectUserCity"); input.innerHTML = res.value; } }); return false; } </script>

And in JSP ------------------ I note that I use the onchange event and everything works when I change the country, I get its value via request.getAttribute ("country"); in servlet. But when I did not change anything and everything was loaded for the first time in a servlet, I get null. -------------------

 <label for="selectUserCountry">Country</label><br> <select id="selectUserCountry" name="countrySelect" onchange="return getCity();"></select><br> <label for="selectUserCity">City</label><br> <select id="selectUserCity" name="citySelect"></select><br>
  • one
    It would be nice to look at the code. When loading the page does not load the cities in the selected 1st country? - RifmaMan
  • The page is loaded, loaded from the base of the old into the option fields and when everything is loaded, I have one option selected, namely Russia, and now I would like to get the value of the selected field to the servlet in order to load cities from this country by its value. Code added. - Vardan Matevosyan

1 answer 1

When loading a page, you can take a selecta value and pass it to another object for use with JS (in this case with the jQuery library connected) or initialize the widget using melons as a variable for it.

 $(document).ready(function() { alert($('#temp_form select[name="country"]').val()); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="temp_form"> <select name="country"> <option value="1" selected="">Россия</option> <option value="2">Армения</option> </select> </form>