單擊選擇菜單中的選項時的動作

我正在編程一個帶有地圖和側面板的網站，在那裏我想要發生一些動作，我在選擇菜單中選擇了一個選項。單擊選擇菜單中的選項時的動作

這是我的代碼：

<select id="optionList" onchange="display_div(document.getElementById('optionList').value);"> 
    <option selected="selected">Chose league</option> 
    <option value="PL">Premier League</option> 
    <option value="CH">Championship</option> 
    <option value="L1">League 1</option> 
    <option value="L2">League 2</option> 
</select> 
<p></p> 
<div id="PL" style="display:none;"> 
    <select id="plTeamList" onchange="display_div2(document.getElementById('plTeamList').value);"> 
    <option selected="selected">Chose team</option> 
    <option value="MUN">Manchester United</option> 
    <option value="CHE">Chelsea</option> 
    <option value="BOU">Bournemouth</option> 
    <option value="NEW">Newcastle</option> 
    </select> 
    <div id="MUN" style="display:none" onclick="clickOnMUN()"> .... </div> 
</div>

在那裏我有，當你從菜單中選擇曼聯（它是繪製在地圖上的一些彈出窗口）會發生什麼腳本：

function clickOnMUN() { 
    var info = whichteam("MU"); // Finner ut hvilket lag som spiller, og info om stadion 
    var marker = L.marker([info.substring(0, 5), info.substring(5, 10)]).addTo(map); 

    marker.bindPopup(info.substring(10)); 
}

當我在團隊列表中選擇一個選項時，該代碼奇怪地不會執行腳本。 display_div-functions只顯示選項。

來源

2016-04-01 Adrian Tuft Isdahl

你可以分享'display_div'和'display_div2'功能？ –

伯恩茅斯和紐卡斯爾！ - 那是什麼樣的選擇？對不起，我正在輕浮 - 嘗試將display_div和display_div2更改爲alert（）並查看會發生什麼。而且，要非常挑剔，這是'選擇聯盟'，而不是選擇... –

哦...你可能需要option_list.selectedIndex.value（檢查語法，但類似的東西） –

我看到的唯一問題是第二個「display_div」調用......它說「display_div2」可能是一個錯字......但如果它與第一個相同並且只顯示隱藏的div，則應刪除2解決部分問題。如果你爲點擊事件使用一些偵聽器，而不是將函數調用放在html標記中，它也可以改進代碼。但是，這可能是你當前代碼的版本：

function display_div(theDiv) { 
 
\t console.log (theDiv); 
 
\t $('#'+theDiv).css("display", "block"); 
 
} 
 

 
function clickOnTeamList(targ) { 
 

 
\t $('#status').html("clicked a team " + targ); 
 
}

p { 
 
font-family: verdana; 
 
font-size:12px; 
 
color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="optionList" onchange="display_div(document.getElementById('optionList').value)"> 
 
    <option selected="selected">Chose league </option> 
 
    <option value="PL">Premier League • only option active</option> 
 
    <option value="CH">Championship</option> 
 
    <option value="L1">League 1</option> 
 
    <option value="L2">League 2</option> 
 
</select> 
 
<p></p> 
 

 
<div id="PL" style="display:none;"> 
 
    <select id="plTeamList" onchange="display_div(document.getElementById('plTeamList').value);"> 
 
    <option selected="selected">Chose team</option> 
 
    <option value="MUN">Manchester United</option> 
 
    <option value="CHE">Chelsea</option> 
 
    <option value="BOU">Bournemouth</option> 
 
    <option value="NEW">Newcastle</option> 
 
    </select> 
 
    
 
    <div id = "MUN" style="display:none" onclick="clickOnTeamList(' Manchester United')" ><p>Team: Manchester United</p></div> 
 
    <div id = "CHE" style="display:none" onclick="clickOnTeamList('Chelsea')" ><p>Team: Chelsea</p></div> 
 
    <div id = "BOU" style="display:none" onclick="clickOnTeamList('Bournemouth')" ><p>Team: Bournemouth</p></div> 
 
    <div id = "NEW" style="display:none" onclick="clickOnTeamList('Newcastle')" ><p>Team: Newcastle</p></div> 
 
    
 
</div> 
 

 
<div id="status">___</div>

來源

2016-04-01 16:58:58 aolba

單擊選擇菜單中的選項時的動作

回答

相關問題