带有脚本的下拉菜单中的占位符

Question

我是 php 和脚本的新手。请帮我解决一件小事。

我从这里获取我的代码...http://jsfiddle.net/bdhacker/eRv2W/

我有国家和州的下拉列表，其中国家/地区已经显示“选择国家”，但在州/省上其空白，直到我们选择任何国家。我想像选择国家一样预先显示选择州/省。

这是我的工作链接https://www.paradoxaccess.com/lp/country/Access_Roads.html

这是我的脚本

// Countries
var country_arr = new Array("Canada", "United States");

// States
var s_a = new Array();
s_a[0] = "";
s_a[1]  = "Alberta|British Columbia|Manitoba|New 
Brunswick|Newfoundland|Northwest Territories|Nova 
Scotia|Nunavut|Ontario|Prince Edward Island|Quebec|Saskatchewan|Yukon 
Territory";
s_a[2] = "Alabama|Alaska|Arizona|Arkansas|California|Colorado|Connecticut|Delaware|
District of Columbia|Florida|Georgia|Hawaii|Idaho|Illinois|Indiana|Iowa|
Kansas|   Kentucky|Louisiana|Maine|Maryland|Massachusetts|Michigan|
Minnesota|Mississippi|Missouri|Montana|Nebraska|Nevada|New Hampshire
|New Jersey|New Mexico|New York|North Carolina|North 
Dakota|Ohio|Oklahoma|Oregon|Pennsylvania|Rhode Island|
South Carolina|South Dakota|Tennessee|Texas|Utah|Vermont|Virginia
|Washington|West Virginia|Wisconsin|Wyoming";

function populateStates(countryElementId, stateElementId) {

var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;
var stateElement = document.getElementById(stateElementId);

stateElement.length = 0; // Fixed by Julian Woods
stateElement.options[0] = new Option('Select Province/State', '');
stateElement.selectedIndex = 0;

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

for (var i = 0; i < state_arr.length; 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);
countryElement.length = 0;
countryElement.options[0] = new Option('Select Country', '-1');
countryElement.selectedIndex = 0;
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);
        };
    }
}


    <!-- HTML -->
    <select id="country" name="country"></select>
    <br />
    
    <select name="state" id="state"></select>
    <br/>
    
    <script language="javascript">
        populateCountries("country", "state");
        
    </script>

提前非常感谢您。

Answer 1

尝试在onchange 函数之外调用populateStates 函数，以便它执行并填充默认项。

// Assigned all countries. Now assign event listener for the states.
if (stateElementId) {
    populateStates(countryElementId, stateElementId);  
    countryElement.onchange = function () {
        populateStates(countryElementId, stateElementId); 
    };
}