如何设置下拉选择的默认值

时间:2016-01-06 22:07:38

标签: javascript jquery

我认为我的选择状态下拉框会自动显示“选择状态”但是,这并没有像我预期的那样工作。下拉框为空,直到我选择一个国家/地区,然后状态下拉框显示“选择状态。如何将我的状态下拉框设置为”默认选择状态?“

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");
        }
    };
}

}

2 个答案:

答案 0 :(得分:1)

您可以使用默认状态下拉列表html仅包含一个选项:选择状态。例如在html中

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

答案 1 :(得分:1)

阻止选择第一个选项:

&#13;
&#13;
<select>
        <option value="" disabled selected hidden>Select State</option>
        <option value="USA">USA</option>
        <option value="Canada">Canada</option>
    </select>
&#13;
&#13;
&#13;