Select Country Dropdown in HTML Page

How to display selected value in country dropdown list

You're on the right lines, but your code will become rather heavy if you type out each <option> line in full.

I'd go for something like this:

// Dummy data. substitute whatever you have for employee data in the 
// foreach loop below
$employee = ['country'=>'United Kingdom'];

$countryList = ["Afghanistan", "Mexico", "New Zealand", "United Kingdom", "United States","Zimbabwe"];

echo '<select name="country">';
echo "<option value='' >Select Country</option>";


foreach($countryList as $country) {
    $sel = ($employee['country'] === $country) ? 'selected' : '';
    echo "<option value='$country' $sel>$country</option>";
}
echo '</select>';

add country code in the dropdown of intl-country-code dropdown in jquery

To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:

$(function() {
  $("#country").change(function() {
    let countryCode = $(this).find('option:selected').data('country-code');
    let value = "+" + $(this).val();
    $('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
  });
  
  var code = "+977";
  $('#txtPhone').val(code).intlTelInput();
});

<div class="container-fluid">
  <div class="row">
    <h1>Select Country</h1>
  </div>
  <div class="row">
    <div class="col-md-12 form-group">
      <div class="col-md-6 form-group hire-input-country_box position-relative">
        <select name="country" class="form-control" id="country">
          <option data-country-code="DZ" value="213">Algeria</option>
          <option data-country-code="AD" value="376">Andorra</option>
          <option data-country-code="AO" value="244">Angola</option>
          <option data-country-code="AI" value="1264">Anguilla</option>
          <option data-country-code="AG" value="1268">Antigua & Barbuda
          </option>
        </select>
      </div>
    </div>
    <div class="col-md-12 form-group">
      <input type="tel" id="txtPhone" class="txtbox" />
    </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />

HTML select dropdown countries and states using (countries.js)

This question is rather broad, so I'll offer some clues for your research. Here is the code where you handle a country change in your menu:

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

The first thing to do is to ensure your event works. Change the above to this:

if (stateElementId) {
  countryElement.onchange = function () {
    alert('Changed country');
    populateStates(countryElementId, stateElementId);
  };
}

My guess is the if() clause is wrong - the event should be attached in all cases, not just when a selected state is provided. But this is up to you to test - make sure that the alert() triggers in all cases when it should.

Next, you need to set up some way of reading the label that each country gives to its internal divisions. You're using a global array country_arr for the countries, so perhaps set label_arr or similar, with each position containing "Canton", "State", "Department", "Region" as appropriate. You have not shown where this array is set up, so just set up the new array in the same place.

You can then add the appropriate code to change the label inside this event handler.

Please give this a go, and let me know how you get on. I would recommend you clean up the code indentation too, as it will make it easier to work with.

Javascript - Populate country code drop down onChange of country dropdown

Plug-ins, not that I know of... I know answers shouldn't only include external links, but I guess this might be exception, I will include a few links in case 1 breaks one day...
Since Country names and codes don't change too often nowadays might be safe with this text extract:

http://www.textfixer.com/resources/dropdowns/country-list-iso-codes.txt

then using split(':') function, easy populate text & value of select lists
options elements like this:

    function populateCountriesDropDown() {
        var file = "countries.txt";
        var selectList = document.getElementById('selectID');
        var rawlist;

        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = function () {
            if (rawFile.readyState === 4) {
                if (rawFile.status === 200 || rawFile.status == 0) {
                    rawlist = rawFile.responseText.split('\n');
                }
            }
        }
        rawFile.send(null);

        for (var i = 0; i < rawlist.length; i++) {
            var country = rawlist[i].split(':');
            selectList.options[selectList.options.length] = new Option(country[1], country[0]);
        }
    }

OR other links with what you might be looking for:

http://www.freeformatter.com/iso-country-list-html-select.html

https://github.com/umpirsky/country-list

Select Country Dropdown in HTML Page

How to display selected value in country dropdown list

add country code in the dropdown of intl-country-code dropdown in jquery

HTML select dropdown countries and states using (countries.js)

Javascript - Populate country code drop down onChange of country dropdown

Related Topics

Leave a reply