单击选择菜单中的选项时的操作

Action when clicking on an option in a select menu

本文关键字：选项 操作 选择 菜单 单击      更新时间：2023-11-25

我正在用地图和侧面板编程一个网站，如果我在选择菜单中选择了一个选项，我希望在那里进行一些操作。

这是我的代码：

<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函数仅显示选项。

我看到的唯一问题是第二个"display_div"调用。。。上面写着"display_div2"可能是打字错误。。。但是，如果它与第一个相同，并且只显示隐藏的div，那么删除2应该可以解决部分问题。此外，如果您为clicks事件使用一些监听器，而不是将函数调用放在html标记中，则可以改进代码。但这可能是你当前代码的一个版本：

function display_div( theDiv ) {
	console.log ( theDiv );
	$('#'+theDiv).css("display", "block" );
}
function clickOnTeamList(targ) {
	$('#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>

相关文章：