CODEWITHSUNDEEP
javascriptjquery
Code4life
Code4life

Reputation: 67

How can I set the default value for a dropdown selection

I assumed that the my select state dropdown box would automatically display "select state" However, this did not work as I had expected. The dropdown box is empty until I choose a country and only then will the state dropdown box display "select state. How can I set my state dropdown box to "select state" by default?

function populateStates(countryElementId, stateElementId) {
var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;
var stateElement = document.getElementById(stateElementId);

stateElement.length = 0; //  
stateElement.options[0] = new Option('Select State', '');
stateElement.selectedIndex = 0;

var state_arr = s_a[selectedCountryIndex].split("|");

for (var i = 0; i < state_arr.length; i++) {
    if (state_arr[i] != "") {
        stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
    }
  }
}

function populateCountries(countryElementId, stateElementId) {
// given the id of the <select> tag as function argument, it inserts <option> tags
var countryElement = document.getElementById(countryElementId);
jQuery("#" + countryElementId + " option").remove();
jQuery("#" + countryElementId).append("<option value=\"\">USA</option>");
for (var i = 0; i < country_arr.length; i++) {
    countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
}

// Assigned all countries. Now assign event listener for the states.
if (stateElementId) {
    countryElement.onchange = function() {
        populateStates(countryElementId, stateElementId);
        jQuery("#" + stateElementId + " option:eq(0)").attr("selected", "selected");
        jQuery("#" + stateElementId).val("").change();
        if (jQuery("#" + countryElementId).val() == "USA") {
            jQuery("#Zip_Postal_Code__c").attr("maxlength", "5");
        } else if (jQuery("#" + countryElementId).val() == "Canada") {
            jQuery("#Zip_Postal_Code__c").attr("maxlength", "6");
        } else {
            jQuery("#Zip_Postal_Code__c").removeAttr("maxlength");
        }
    };
}

}

Upvotes: 0

Views: 162

Answers (2)

Kristofer Escobar
Kristofer Escobar

Reputation: 36

To prevent the first option from being selected:

<select>
        <option value="" disabled selected hidden>Select State</option>
        <option value="USA">USA</option>
        <option value="Canada">Canada</option>
    </select>

Upvotes: 1

Va1iant
Va1iant

Reputation: 353

You can just use the default state dropdown html to contain only one option: Select State. e.g. in the html

<select id="state_select">
    <option value="">Select State</option>
</select>

Upvotes: 1

Related Questions