javascript - Javascript 从许多选择列表中获取选定索引

Question

我正在尝试创建用户可以从选择列表中单击的政府网站类别，他们将被定向到该位置。问题是我无法从这么多选择列表中获得 selectedIndex，或者我可能在其他地方搞砸了。选项值包含链接。这是一个可以使用的JSFiddle链接。

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

Answer 1

When you call addEventListener you need to pass a reference to a function, but you were calling the function by including parentheses after it. Also when using addEventListener the event is 'change', not 'onchange' (drop the "on" from all events for use with addEventListener). So:

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

Also in this line of your second function:

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

You were using a variable selectedIndex that isn't defined. That line should've been:

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

Also in your fiddle you weren't actually calling init().

Here's a "working" version:

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

Demo: http://jsfiddle.net/By4v4/5/

Do you really want to loop through all select elements every time one of them changes? You can do this to get the value of the one that changed:

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

Demo: http://jsfiddle.net/By4v4/12/

Answer 2

您没有调用该函数init()，也没有像 jsfiddle 中的示例一样分配事件，但请查看以下示例

JSFiddle 演示