Feature request: empty country selection

[vektor330]

One more for today :)
It seems to me there is no straightforward way to "clear" the selection, so that after submitting the form the country value is "empty". The same goes for starting without any country selected.

Am I missing something? If not, how hard would it be to add this possibility?

[mrmarkfrench]

Hmm. Not sure. The way it's built, it definitely expects there to be a country selected. Usually this is handled by setting a default country, or by selecting one or more "preferred" countries to appear at the top of the list, and relying on it to just select the first one by default.

If you have a suggestion on how you think this should be handled, I'd be interested to see it. I think that this should be optional behavior, but the ability to have no country selected is a perfectly valid choice in some use cases.

[vektor330]

I would keep the default behavior just the way it's today. But let's say there is an option "allowsEmpty" that makes it possible to have defaultCountry empty as well, and if you say "selectCountry", "" then this clears the selection as well. Empty county would then mean empty result from getSelectedCountryData and empty value in the associated _code field.

[mrmarkfrench]

Yes, all of that makes sense. The part that I think is actually the wrinkle is around the display of the flag. What is shown in the spot where the flag usually is if nothing is selected? What prompts the user that if they click there, a list of flags and country names will drop down for them to select from?

I think leaving it entirely blank doesn't give the user the right information to interact with it. Maybe an "empty" flag would do the trick. Something like this: https://sophiesensei.files.wordpress.com/2014/10/blankflag.png?w=705

[vektor330]

Empty flag makes sense, perhaps a globe icon would convey the same meaning.

[aaronfischer]

Did anything end up coming from this?

I definitely have a use-case for needing an empty or null defaultCountry on initialization.
(Can @mrmarkfrench think of any other way of doing this?)

[mrmarkfrench]

@aaronfischer I'd be happy to accept a pull request.

[baberuth22]

I'd like to have an empty country as well. Are there any solutions that can be implemented immediately? Instead of an empty flag, I think the text 'Select a Country' would be most informative.

[j77esus]

Hello!
+1 👍 to "Select a Country" text :) maybe with a down arrow instead of a flag

[cnsgithub]

Easy workaround who needs this feature:

• Modifly flags sprite if you want an icon for your custom selection
• add CSS: .country-select .xa{background-position:-208px -154px}
  .country-select .xn{background-position:-208px -165px}
• add custom value:

      {
		n: "All",
		i: "xa"
	}

{
		n: "None",
		i: "xn"
	}

But obviously a proper solution for possible use-cases

"No country" , or "All countries" would be useful

[kilinkis]

I would love to see this as well

@cnsgithub thanks for your effort, but how do you add the custom values?

[cnsgithub]

I don't understand. Just add them to the variable (modify the countrySelect file)

var allCountries

[vipertecpro]

I had to use js instead of min.js...Following is workaround suggested above and it works fine with me :-

$(".country_selector").countrySelect({
       defaultCountry: "xn",
   });

var allCountries = $.each([
        {
            n: "PLease Select the country",
            i: "xn"
        },...............
 ], function(i, c) {
		c.name = c.n;
		c.iso2 = c.i;
		delete c.n;
		delete c.i;
	});