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

March 28, 2022

I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn’t find suitable documentation of this plugin too. this is my code.

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
    </head>
    <body>
        <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-countryCode="DZ" value="213">Algeria</option>
                            <option data-countryCode="AD" value="376">Andorra</option>
                            <option data-countryCode="AO" value="244">Angola</option>
                            <option data-countryCode="AI" value="1264">Anguilla</option>
                            <option data-countryCode="AG" value="1268">Antigua &amp; Barbuda
                            </option>
                        </select>
                    </div>
                </div>
                <div class="col-md-12 form-group">
                    <input type="tel" id="txtPhone" class="txtbox" />
                </div>
            </div>
        </div>
        <!-- Use as a jQuery plugin -->
        <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>
        <script type="text/javascript">
            $(function () {

                $("#country").change(function()
                {
                    let value="+"+$(this).val();
                    $('#txtPhone').val(value);

                })
                var code = "+977"; // Assigning value from model.
                $('#txtPhone').val(code);
                $('#txtPhone').intlTelInput({
                });
            });
        </script>
    </body>
</html>

>Solution :

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 &amp; 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" />