使用array创建状态下拉菜单
Creating drop down menu of states using array
如何使用数组创建所有美国州的选择下拉菜单?我在我的.js文件中写了以下内容:
var usStates = [
{ name: 'ALABAMA', abbreviation: 'AL'},
{ name: 'ALASKA', abbreviation: 'AK'},
{ name: 'AMERICAN SAMOA', abbreviation: 'AS'},
{ name: 'ARIZONA', abbreviation: 'AZ'},
{ name: 'ARKANSAS', abbreviation: 'AR'},
{ name: 'CALIFORNIA', abbreviation: 'CA'},
{ name: 'COLORADO', abbreviation: 'CO'},
{ name: 'CONNECTICUT', abbreviation: 'CT'},
{ name: 'DELAWARE', abbreviation: 'DE'},
{ name: 'DISTRICT OF COLUMBIA', abbreviation: 'DC'},
{ name: 'FEDERATED STATES OF MICRONESIA', abbreviation: 'FM'},
{ name: 'FLORIDA', abbreviation: 'FL'},
{ name: 'GEORGIA', abbreviation: 'GA'},
{ name: 'GUAM', abbreviation: 'GU'},
{ name: 'HAWAII', abbreviation: 'HI'},
{ name: 'IDAHO', abbreviation: 'ID'},
{ name: 'ILLINOIS', abbreviation: 'IL'},
{ name: 'INDIANA', abbreviation: 'IN'},
{ name: 'IOWA', abbreviation: 'IA'},
{ name: 'KANSAS', abbreviation: 'KS'},
{ name: 'KENTUCKY', abbreviation: 'KY'},
{ name: 'LOUISIANA', abbreviation: 'LA'},
{ name: 'MAINE', abbreviation: 'ME'},
{ name: 'MARSHALL ISLANDS', abbreviation: 'MH'},
{ name: 'MARYLAND', abbreviation: 'MD'},
{ name: 'MASSACHUSETTS', abbreviation: 'MA'},
{ name: 'MICHIGAN', abbreviation: 'MI'},
{ name: 'MINNESOTA', abbreviation: 'MN'},
{ name: 'MISSISSIPPI', abbreviation: 'MS'},
{ name: 'MISSOURI', abbreviation: 'MO'},
{ name: 'MONTANA', abbreviation: 'MT'},
{ name: 'NEBRASKA', abbreviation: 'NE'},
{ name: 'NEVADA', abbreviation: 'NV'},
{ name: 'NEW HAMPSHIRE', abbreviation: 'NH'},
{ name: 'NEW JERSEY', abbreviation: 'NJ'},
{ name: 'NEW MEXICO', abbreviation: 'NM'},
{ name: 'NEW YORK', abbreviation: 'NY'},
{ name: 'NORTH CAROLINA', abbreviation: 'NC'},
{ name: 'NORTH DAKOTA', abbreviation: 'ND'},
{ name: 'NORTHERN MARIANA ISLANDS', abbreviation: 'MP'},
{ name: 'OHIO', abbreviation: 'OH'},
{ name: 'OKLAHOMA', abbreviation: 'OK'},
{ name: 'OREGON', abbreviation: 'OR'},
{ name: 'PALAU', abbreviation: 'PW'},
{ name: 'PENNSYLVANIA', abbreviation: 'PA'},
{ name: 'PUERTO RICO', abbreviation: 'PR'},
{ name: 'RHODE ISLAND', abbreviation: 'RI'},
{ name: 'SOUTH CAROLINA', abbreviation: 'SC'},
{ name: 'SOUTH DAKOTA', abbreviation: 'SD'},
{ name: 'TENNESSEE', abbreviation: 'TN'},
{ name: 'TEXAS', abbreviation: 'TX'},
{ name: 'UTAH', abbreviation: 'UT'},
{ name: 'VERMONT', abbreviation: 'VT'},
{ name: 'VIRGIN ISLANDS', abbreviation: 'VI'},
{ name: 'VIRGINIA', abbreviation: 'VA'},
{ name: 'WASHINGTON', abbreviation: 'WA'},
{ name: 'WEST VIRGINIA', abbreviation: 'WV'},
{ name: 'WISCONSIN', abbreviation: 'WI'},
{ name: 'WYOMING', abbreviation: 'WY' }
];
alert(usStates[1].name);
for ( var i = 0; i >= 50; i--) {
var opt1 = usStates[i].abbreviation;
var opt2 = usStates[i].name;
var select = document.getElementById("state");
var option = document.createElement("OPTION");
option.text = opt1;
option.value = opt2;
select.options.add(option);
}
然后在我的html文件中:
State: <select id="state"></select>
但是,下拉菜单是空的,不能工作。什么好主意吗?
根据您的代码,您可以这样做:
var stateSelect = document.getElementById('state');
for(var i = 0; i < usStates.length; i++) {
var option = document.createElement("option");
option.text = usStates[i].name;
option.value = usStates[i].abbreviation;
stateSelect.add(option);
}
你的问题是你的循环与var i是假的。你必须在i小于50且不大于…时执行循环。这就是你的问题!
for ( var i = 0; i >= 50; i--)
你永远不会这样进入循环。
在你的html的某个地方,你有这个:
<select id="state" name="states"></select>
然后在javascript中你可以这样做:
//your array of states objects declared before, array name is 'states'
for(var i = 0;i<states.length;i++){
var option = document.createElement("option");
option.text = states[i].name+' ['+states[i].abbreviation+']';
option.value = i;
var select = document.getElementById("state");
select.appendChild(option);
}
检查这里,这工作正常:http://jsfiddle.net/bx8aa0et/2/
希望有帮助!
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 如果其中一个子菜单项处于活动状态,则展开下拉菜单
- Javascript在悬停状态下制作下拉菜单 - 没有HTML中的硬编码
- 下拉菜单不想保持打开状态
- JavaScript 下拉菜单在单击时处于活动状态,在外部单击时不活动
- Bootstrap下拉菜单–如果搜索栏集中,请保持打开状态
- 动态国家/地区状态下拉菜单
- 将动态下拉菜单重置回初始状态
- 希望在较小的窗口中保持下拉菜单的状态
- 更改jQuery UI下拉菜单's的背景颜色取决于复选框状态
- 使用array创建状态下拉菜单
- 为什么我的悬停按钮下拉菜单在我鼠标悬停时不保持打开状态