0

ユーザーが選択リストからクリックしてその場所に移動できる政府のWebサイトのカテゴリを作成しようとしています。問題は、この多くの選択リストから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);
}​
4

2 に答える 2

3

呼び出すときはaddEventListener、関数への参照を渡す必要がありますが、関数の後に括弧を含めて関数を呼び出していました。またaddEventListener、イベントを使用する場合は'change'、ではありません'onchange'（で使用するすべてのイベントから「オン」をドロップしますaddEventListener）。それで：

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

また、2番目の関数のこの行では：

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/

選択したすべての要素の1つが変更されるたびに、それらをループする必要がありますか？これを行うと、変更されたものの値を取得できます。

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

デモ： http： //jsfiddle.net/By4v4/12/

于 2012-12-05T02:48:30.530 に答える
1

関数init()を呼び出したり、jsfiddleの例のようなイベントを割り当てたりするのではありませんが、以下の例を確認してください。

JSFiddleデモ

于 2012-12-05T02:50:02.837 に答える