Javascript从多个选择列表中选择索引

我试图创建政府网站的类别，用户可以从选择列表中单击并将它们定向到该位置。问题是我无法得到selectedIndex表单这个很多选择列表或者我在其他地方搞砸了一些东西。选项值包含链接。这里有一个JSFiddle链接。Javascript从多个选择列表中选择索引

HTML

<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.os.dhhs.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://www.house.gov/house/MemberWWW.shtml">Representatives' Web Sites</option> 
      <option value="http://clerk.house.gov/">Clerk of the House</option> 
      <option value="http://www.gpoaccess.gov/cdirectory/index.html">Congressional Directory</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> 
      <option value="http://www.gpoaccess.gov/">Government Printing Office</option> 
      <option value="http://thomas.loc.gov/home/legbranch/otherleg.html#govpub">Government Records and Publications</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="http://www.uscourts.gov/supremecourt.html">U.S. Supreme Court</option> 
      <option value="http://www.uscourts.gov/courtsofappeals.html">U.S. Courts of Appeals</option> 
      <option value="http://www.uscourts.gov/districtcourts.html">U.S. District Courts</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.loc.gov/global/state/al-gov.html">Alabama</option> 
      <option value="http://www.loc.gov/global/state/ak-gov.html">Alaska</option> 
      <option value="http://www.loc.gov/global/state/az-gov.html">Arizona</option> 
      <option value="http://www.loc.gov/global/state/ar-gov.html">Arkansas</option> 
      <option value="http://www.loc.gov/global/state/ca-gov.html">California</option> 
      <option value="http://www.loc.gov/global/state/co-gov.html">Colorado</option> 
      <option value="http://www.loc.gov/global/state/ct-gov.html">Connecticut</option> 
      <option value="http://www.loc.gov/global/state/de-gov.html">Delaware</option> 
      <option value="http://www.loc.gov/global/state/dc-gov.html">District of Columbia</option> 
      <option value="http://www.loc.gov/global/state/fl-gov.html">Florida</option> 
      <option value="http://www.loc.gov/global/state/ga-gov.html">Georgia</option> 
      <option value="http://www.loc.gov/global/state/hi-gov.html">Hawaii</option> 
      <option value="http://www.loc.gov/global/state/id-gov.html">Idaho</option> 
      <option value="http://www.loc.gov/global/state/il-gov.html">Illinois</option> 
      <option value="http://www.loc.gov/global/state/in-gov.html">Indiana</option> 
      <option value="http://www.loc.gov/global/state/ia-gov.html">Iowa</option> 
      <option value="http://www.loc.gov/global/state/ks-gov.html">Kansas</option> 
      <option value="http://www.loc.gov/global/state/ky-gov.html">Kentucky</option> 
      <option value="http://www.loc.gov/global/state/la-gov.html">Louisana</option> 
      <option value="http://www.loc.gov/global/state/me-gov.html">Maine</option> 
      <option value="http://www.loc.gov/global/state/md-gov.html">Maryland</option> 
      <option value="http://www.loc.gov/global/state/ma-gov.html">Massachusetts</option> 
      <option value="http://www.loc.gov/global/state/mi-gov.html">Michigan</option> 
      <option value="http://www.loc.gov/global/state/mn-gov.html">Minnesota</option> 
      <option value="http://www.loc.gov/global/state/ms-gov.html">Mississippi</option> 
      <option value="http://www.loc.gov/global/state/mo-gov.html">Missouri</option> 
      <option value="http://www.loc.gov/global/state/mn-gov.html">Montana</option> 
      <option value="http://www.loc.gov/global/state/ne-gov.html">Nebraska</option> 
      <option value="http://www.loc.gov/global/state/nv-gov.html">Nevada</option> 
      <option value="http://www.loc.gov/global/state/nh-gov.html">New Hampshire</option> 
      <option value="http://www.loc.gov/global/state/nj-gov.html">New Jersey</option> 
      <option value="http://www.loc.gov/global/state/nm-gov.html">New Mexico</option> 
      <option value="http://www.loc.gov/global/state/ny-gov.html">New York</option> 
      <option value="http://www.loc.gov/global/state/nc-gov.html">North Carolina</option> 
      <option value="http://www.loc.gov/global/state/nd-gov.html">North Dakota</option> 
      <option value="http://www.loc.gov/global/state/oh-gov.html">Ohio</option> 
      <option value="http://www.loc.gov/global/state/ok-gov.html">Oklahoma</option> 
      <option value="http://www.loc.gov/global/state/or-gov.html">Oregon</option> 
      <option value="http://www.loc.gov/global/state/pa-gov.html">Pennsylvania</option> 
      <option value="http://www.loc.gov/global/state/ri-gov.html">Rhode Island</option> 
      <option value="http://www.loc.gov/global/state/sc-gov.html">South Carolina</option> 
      <option value="http://www.loc.gov/global/state/sd-gov.html">South Dakota</option> 
      <option value="http://www.loc.gov/global/state/tn-gov.html">Tennessee</option> 
      <option value="http://www.loc.gov/global/state/tx-gov.html">Texas</option> 
      <option value="http://www.loc.gov/global/state/ut-gov.html">Utah</option> 
      <option value="http://www.loc.gov/global/state/vt-gov.html">Vermont</option> 
      <option value="http://www.loc.gov/global/state/va-gov.html">Virginia</option> 
      <option value="http://www.loc.gov/global/state/wa-gov.html">Washington</option> 
      <option value="http://www.loc.gov/global/state/wv-gov.html">West Virginia</option> 
      <option value="http://www.loc.gov/global/state/wi-gov.html">Wisconsin</option> 
      <option value="http://www.loc.gov/global/state/wy-gov.html">Wyoming</option> 
      </select> 
     </td> 
    </tr> 
</table>

的Javascript

window.onload = init; 

function init() 
{ 
    var allSelect = document.getElementsByTagName('select'); 

    for(var i = 0; i < allSelect.length; i++) 
     allSelect[i].addEventListener('onchange', loadLink()); 
} 

function loadLink() 
{ 
    var allSelect = document.getElementsByTagName('select'); 

    for(var i = 0; i < allSelect.length; i++) 
     if(allSelect[i].selectedIndex > 0) 
      alert(allSelect[i].options[selectedIndex].value); 
}

来源

2012-12-05 Howdy_McGee

对select元素使用'onchange'不是一个好的策略。使用键盘导航，某些浏览器会在每次选择不同选项时以及选择之前分派更改事件。因此，只要用户尝试导航到下一个或上一个选项，用户就会被重新定向，无论这是他们想要选择的选项。 – RobG

当你调用addEventListener你需要传递给函数的引用，但你通过包括后括号调用功能。同样当使用addEventListener事件是'change'而不是'onchange'（从所有事件中删除“on”以便与addEventListener一起使用）。所以：

allSelect[i].addEventListener('onchange', loadLink()); // is NOT correct 
allSelect[i].addEventListener('change', loadLink);  // is correct

而且在这行你的第二个功能：

alert(allSelect[i].options[selectedIndex].value);

您使用的是没有定义的变量selectedIndex。这条线应该已经：

alert(allSelect[i].options[allSelect[i].selectedIndex].value);

而且在拨弄你没有实际调用init()。

这里的“工作”版本：

window.onload = init; 

function init() 
{ 
    var allSelect = document.getElementsByTagName('select'); 

    for(var i = 0; i < allSelect.length; i++) 
     allSelect[i].addEventListener('change', loadLink, false);  
} 

function loadLink() 
{ 
    var allSelect = document.getElementsByTagName('select'); 

    for(var i = 0; i < allSelect.length; i++) 
     if(allSelect[i].selectedIndex > 0) 
      alert(allSelect[i].options[allSelect[i].selectedIndex].value); 
}

演示：http://jsfiddle.net/By4v4/5/

你真的通过每次他们中的一个改变了这一切选择元素要循环？你可以做到这一点得到改变了一个值：

function loadLink() 
{ 
    alert(this.value); 
}

演示：http://jsfiddle.net/By4v4/12/

来源

2012-12-05 02:48:30 nnnnnn

谢谢！我想知道添加事件时'function（）'和'function'之间的区别是什么。 –

不客气。 'someFunc（）'_calls_函数，但'someFunc'是函数的参考。请注意，您已使用'window.onload = init;'正确执行了此操作。另外，我更新了我的答案，提到您不需要遍历所有选择以获取更改的值，因为在事件处理程序中，this是对所讨论元素的引用。（我忘了提及，最初是因为我专注于纠正阻止代码正常工作的事情。） – nnnnnn

你是不是调用函数init()还可以指派的事件，如在的jsfiddle的例子，但检查下方示例

JSFiddle Demo

来源

2012-12-05 02:50:02

Javascript从多个选择列表中选择索引

回答

相关问题