CODEWITHSUNDEEP
javascriptjquery
al404IT
al404IT

Reputation: 1418

int-tel-input limit dropdown nations on select change

I have a select for country and a phone input feel where i used into-tel-input to allow international prefix selection

now i need to change the behavior of the form

once a user select a country i can't select a different international county code

i found a way to change select country code in into-tel-input input but can't find a way to remove other country code or disable section

$('#country').on('change', function(){
    var countrycode = $('#country option:selected').data('countryc');
    telInput1.intlTelInput("onlyCountries", [countrycode]); // doesn't work
    telInput1.intlTelInput("setCountry", countrycode);
});

link to plugin

Upvotes: 0

Views: 3695

Answers (1)

Leo Napoleon
Leo Napoleon

Reputation: 989

The plugin only takes options when it's initialising, after that, it only accepts it's own public methods.

To change an option on the fly, you need to destroy the instance and re-initialise it - which will clear all of it's current options and state altogether. (Note: you can keep user-selected country by storing it in a variable before destroying the instance and using it as initialCountry option)

To do what I described, use a public method destroy (read more about public methods at https://github.com/jackocnr/intl-tel-input#public-methods)

Try using the following code in your javascript for this use case:

telInput1.intlTelInput('destroy').intlTelInput({'onlyCountries': [countrycode]})

Keep in mind that telInput1 must be a jQuery object, not a javascript object.

Upvotes: 3

Related Questions