CODEWITHSUNDEEP
javascriptjqueryhtml
Kevin
Kevin

Reputation: 1357

How to set default countries and show respected states in countries.js?

I am using Countries.js to populate countries and states to a website. I need to set default a country on load and show respective states in select state input. How can it be done?

I have tried Couple of things from the internet.

1.

<script>populateCountries("us", "state");</script>;

2. In Core file -->

if (stateElementId) {
  countryElement.onchange = function() {
    populateStates(countryElementId, stateElementId);
    //populateStates( "us", stateElementId );
  };
}

But it is not working.

Upvotes: 0

Views: 2307

Answers (3)

Woodrow
Woodrow

Reputation: 2832

To set a default country onload, first populate the countries select element with countries using the load document event listener, then get the country select element object by id e.g. countryElement. Using that, set the value to a default country e.g. 'USA', and trigger onchange() on the element to populate the states select box. The below example does this, and then triggers a new country selection after 5 seconds to showcase further the state select box changing.. You selected jQuery tag for this question, but I didn't see any jQuery in your example so I kept it to straight vanilla JS for the example.

$(document).ready(function() {

  populateCountries("country", "state");

  $countryElement = $('#country');
  $stateElement = $('#state');

  $countryElement.val('USA').trigger('change');
  $stateElement.val('Florida');

  setTimeout(function() {
    $countryElement.val('American Samoa').trigger('change');
    $stateElement.val('Eastern');
  }, 5000);

});

/*

document.addEventListener("load",
  populateCountries("country", "state")
);

var countryElement = document.getElementById('country');
var stateElement = document.getElementById('state');

// Set default country
countryElement.value = 'USA';
// Triggers state select population..
countryElement.onchange();
// Set state for country selected..
stateElement.value = 'Florida';

// 5 seconds later, select a different country..
setTimeout(function() {
  countryElement.value = 'American Samoa';
  countryElement.onchange();
  stateElement.value = 'Eastern';
}, 5000);

*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toggle-group="location">
  <div class="form-group">
    <label>Country</label>
    <select class="form-control" name="country" id="country" data-toggle="country" data-country=""></select>
  </div>
  <div class="form-group">
    <label>State</label>
    <select class="form-control" name="state" id="state" data-toggle="state" data-state=""></select>
  </div>
</div>

<script type="text/javascript" src="https://www.cssscript.com/demo/generic-country-state-dropdown-list-countries-js/countries.js"></script>

Upvotes: 1

Jelly Bean
Jelly Bean

Reputation: 1219

You should be able to get it right by setting its value:

$('select').val('stateElementId')

or by the text inside the <option></option>

$('select option:contains("us")').prop('selected',true);

Upvotes: 0

Ronak
Ronak

Reputation: 190

you can use the Jquery document ready function like below. But you have to include the jquery.

<script type="text/javascript">
$(document).ready(function() {
    populateCountries("us", "state");
});
</script>

you can see the more detail here at below link.

http://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 0

Related Questions