How can I change the default option for a country dropdown?

Highlighted
New Member
1 0 0

Hello all. I will give you a quick rundown on what I am trying to do. All I want to do is to add in a disabled option into a country selector dropdown. For example, I want it to say something like "Choose a Country" instead of defaulting to a specific country.

When I try to just add in that option above the "country_option_tags" object, it visually works, but I get the following JS error: "Uncaught TypeError: can't access property "length", e is null"

Screen Shot 2020-07-09 at 10.26.32 AM.png

Here is the snippet of code I'm using for the dropdown:

<!-- country select -->
<div class="row form-group">
    <div class="col-sm-12 col-md-3">
      <label for="address_country_new">{{ 'customer.addresses.country' | t }}</label>
    </div>
    <div class="col-sm-12 col-md-9">
      <select id="address_country_new" class="form-control" name="contact[country]" required>
          <option disabled selected value="Select Country">Select Country</option>
          {{ country_option_tags }}
      </select>
    </div>
</div>

When I remove the "Select Country" option, the error goes away. I really hope someone can help me out here, this is making me crazy. Any thoughts and suggestions are welcome.

Thank you in advance!

0 Likes
Highlighted
Shopify Partner
468 59 72

Apparently script is being called on page load and its taking default country which is null in your case. If it is not an issue you may start with a default country which is certainly working

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes