我创建了一个 allSelect 变量,该变量引用嵌套在 govLinks 表单中的所有选择元素(希望这是正确的,请参见HTML)。我需要遍历 allSelect 对象集合,并为集合中的每个选择列表创建 onchange 事件的匿名函数。
在此匿名函数中,我需要使用 location 对象的href属性将浏览器窗口中显示的页面更改为启动 onchange 事件。
这是我到目前为止所尝试的:
window.addEventListener("load", function() {
var allSelect = document.getElementById("govLinks").querySelectorAll("select");
for (var i = 0; i < allSelect.length; i++) {
allSelect.onchange = function(e) {
location.href = e.target.value;
}
}
});
在我的临时网页上,我有4个下拉菜单,其中包含指向政府网站的链接。根据用户的选择,我希望页面被重定向到所选的链接。
HTML:
<article>
<form id="govLinks" name="govLinks">
<h1>Government Sites on the Web</h1>
<p>Select a site from one of the drop-down lists below.</p>
<table>
<tr><td>Executive Branch</td>
<td><select name="executive" id="executive" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.whitehouse.gov">The White House</option>
<option value="http://www.usda.gov">Department of Agriculture</option>
<option value="http://www.doc.gov">Department of Commerce</option>
<option value="http://www.defenselink.mil">Department of Defense</option>
<option value="http://www.ed.gov">Department of Education</option>
<option value="http://www.energy.gov">Department of Energy</option>
<option value="http://www.hhs.gov">Department of Health and Human Services</option>
<option value="http://www.whitehouse.gov/homeland">Department of Homeland Security</option>
<option value="http://www.hud.gov">Department of Housing and Urban Development</option>
<option value="http://www.doi.gov">Department of the Interior</option>
<option value="http://www.usdoj.gov">Department of Justice</option>
<option value="http://www.dol.gov">Department of Labor</option>
<option value="http://www.state.gov">Department of State</option>
<option value="http://www.ustreas.gov">Department of the Treasury</option>
</select>
</td>
</tr>
<tr><td>Legislative Branch</td>
<td><select name="legislative" id="legislative" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.house.gov">House Web Site</option>
<option value="http://clerk.house.gov/">Clerk of the House</option>
<option value="http://www.senate.gov">Senate Web Site</option>
<option value="http://www.senate.gov/general/contact_information/senators_cfm.cfm">Senators' Web Sites</option>
<option value="http://www.senate.gov/artandhistory/history/common/generic/Senate_Historical_Office.htm">Senate Historic Office</option>
<option value="http://www.cq.com">Congressional Quarterly</option>
<option value="http://www.loc.gov/">Library of Congress</option>
<option value="http://www.gao.gov/">Government Accountability Office</option>
<option value="http://www.cbo.gov/">Congressional Budget Office</option>
</select>
</td>
</tr>
<tr><td>Judicial Branch</td>
<td><select name="judicial" id="judicial" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.uscourts.gov">U.S. Courts</option>
<option value="https://www.supremecourt.gov/">U.S. Supreme Court</option>
<option value="http://www.uscourts.gov/courtsofappeals.html">U.S. Courts of Appeals</option>
</select>
</td>
</tr>
<tr><td>State Governments</td>
<td><select name="state" id="state" class="optionLinks">
<option value="#">Select a Web site</option>
<option value="http://www.statelocalgov.net/index.cfm">State and Local Government on the Net</option>
<option value="http://www.statelocalgov.net/state-al.cfm">Alabama</option>
<option value="http://www.statelocalgov.net/state-ak.cfm">Alaska</option>
<option value="http://www.statelocalgov.net/state-az.cfm">Arizona</option>
<option value="http://www.statelocalgov.net/state-ar.cfm">Arkansas</option>
<option value="http://www.statelocalgov.net/state-ca.cfm">California</option>
<option value="http://www.statelocalgov.net/state-co.cfm">Colorado</option>
<option value="http://www.statelocalgov.net/state-ct.cfm">Connecticut</option>
<option value="http://www.statelocalgov.net/state-de.cfm">Delaware</option>
<option value="http://www.statelocalgov.net/state-dc.cfm">District of Columbia</option>
<option value="http://www.statelocalgov.net/state-fl.cfm">Florida</option>
<option value="http://www.statelocalgov.net/state-ga.cfm">Georgia</option>
<option value="http://www.statelocalgov.net/state-hi.cfm">Hawaii</option>
<option value="http://www.statelocalgov.net/state-id.cfm">Idaho</option>
<option value="http://www.statelocalgov.net/state-il.cfm">Illinois</option>
<option value="http://www.statelocalgov.net/state-in.cfm">Indiana</option>
<option value="http://www.statelocalgov.net/state-ia.cfm">Iowa</option>
<option value="http://www.statelocalgov.net/state-ks.cfm">Kansas</option>
<option value="http://www.statelocalgov.net/state-ky.cfm">Kentucky</option>
<option value="http://www.statelocalgov.net/state-la.cfm">Louisana</option>
<option value="http://www.statelocalgov.net/state-me.cfm">Maine</option>
<option value="http://www.statelocalgov.net/state-md.cfm">Maryland</option>
<option value="http://www.statelocalgov.net/state-ma.cfm">Massachusetts</option>
<option value="http://www.statelocalgov.net/state-mi.cfm">Michigan</option>
<option value="http://www.statelocalgov.net/state-mn.cfm">Minnesota</option>
<option value="http://www.statelocalgov.net/state-ms.cfm">Mississippi</option>
<option value="http://www.statelocalgov.net/state-mo.cfm">Missouri</option>
<option value="http://www.statelocalgov.net/state-mn.cfm">Montana</option>
<option value="http://www.statelocalgov.net/state-ne.cfm">Nebraska</option>
<option value="http://www.statelocalgov.net/state-nv.cfm">Nevada</option>
<option value="http://www.statelocalgov.net/state-nh.cfm">New Hampshire</option>
<option value="http://www.statelocalgov.net/state-nj.cfm">New Jersey</option>
<option value="http://www.statelocalgov.net/state-nm.cfm">New Mexico</option>
<option value="http://www.statelocalgov.net/state-ny.cfm">New York</option>
<option value="http://www.statelocalgov.net/state-nc.cfm">North Carolina</option>
<option value="http://www.statelocalgov.net/state-nd.cfm">North Dakota</option>
<option value="http://www.statelocalgov.net/state-oh.cfm">Ohio</option>
<option value="http://www.statelocalgov.net/state-ok.cfm">Oklahoma</option>
<option value="http://www.statelocalgov.net/state-or.cfm">Oregon</option>
<option value="http://www.statelocalgov.net/state-pa.cfm">Pennsylvania</option>
<option value="http://www.statelocalgov.net/state-ri.cfm">Rhode Island</option>
<option value="http://www.statelocalgov.net/state-sc.cfm">South Carolina</option>
<option value="http://www.statelocalgov.net/state-sd.cfm">South Dakota</option>
<option value="http://www.statelocalgov.net/state-tn.cfm">Tennessee</option>
<option value="http://www.statelocalgov.net/state-tx.cfm">Texas</option>
<option value="http://www.statelocalgov.net/state-ut.cfm">Utah</option>
<option value="http://www.statelocalgov.net/state-vt.cfm">Vermont</option>
<option value="http://www.statelocalgov.net/state-va.cfm">Virginia</option>
<option value="http://www.statelocalgov.net/state-wa.cfm">Washington</option>
<option value="http://www.statelocalgov.net/state-wv.cfm">West Virginia</option>
<option value="http://www.statelocalgov.net/state-wi.cfm">Wisconsin</option>
<option value="http://www.statelocalgov.net/state-wy.cfm">Wyoming</option>
</select>
</td>
</tr>
</table>
</form>
</article>
答案 0 :(得分:0)
您忘记获取数组的索引
allSelect[i].onchange = function(e) {
location.href = e.target.value;
}